Could you please explain why my ng-confirm-click doesn't work?
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
I need to hide the button.
Here the example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-app = "plunker">
<div ng-controller="MainCtrl" ng-init="show=true;">
<p >Hello {{name}}!</p>
<button ng-show="show" confirmed-click="changes();show=false;" ng-confirm-click="Confirm change?">change</button>
</div>
</body>
</html>
Try this working code,
Inside html:
<div ng-confirm-click="Are you sure to delete this product ?" confirmed-click="deletePost(data.postId)"> <span class="glyphicon glyphicon-trash"></span></div>
In app.js file, put the below code(without any change):
app.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction)
}
});
}
};
}])
Use scope.$apply instead of scope.$eval and remove unnecessary scope.$apply from controller.
From documentation:
This use of $eval: scope.$eval() seems to be deprecated in favor of scope.$apply to execute a function that uses and modifies the scope, and update the view later.
Plunker
Related
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
I have my DOM element as :
<i id= class="icon clr-org fleft ion-bookmark" ng-class="{business.class : setFavouriteBusinessIcon(business.ID, $index)}"></i>
now I want to apply business.class which is a variable in my scope as the element's class whenever setFavouriteBusinessIcon(business.ID, $index) returns true.
but the current ng-class condition is not working.
You can do so by having single quotes and {{...}} around it. Like this:
<i ng-class="{'{{business.class}}' : setFavouriteBusinessIcon(business.ID, $index)}"></i>
Here's a working example: (notice that world class has been applied and so is its CSS)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'world';
});
.world {
background-color: red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<p ng-class="{'{{name}}': true}">Hello {{name}}!</p>
</body>
</html>
I'm creating popovers with angular-strap using the $popover service like this:
this.popover = $popover(this.element, {
title: 'popover title',
content: 'popover content',
trigger: 'hover',
container: 'body',
html: true
});
This renders correctly:
However, when I try to destroy the popover, it doesn't remove it completely because when I hover over the element, it shows this:
I've tried separately both of the following lines of code which produce the same empty popover result:
this.popover.destroy();
this.popover.$scope.$destroy();
What am I doing wrong?
I tried and its working fine for me, you can refer the plnkr here: http://plnkr.co/edit/KyioKkQhxZDfUnQ0jn2E?p=preview
// HTML code
<!DOCTYPE html>
<html ng-app="mgcrea.ngStrapDocs">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
<link rel="stylesheet" href="style.css" />
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.7"></script>
<script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.7"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="bs-docs-section" ng-controller="PopoverDemoCtrl">
<div class="bs-example" style="padding-bottom: 24px;" append-source>
<!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover
<br />
<small>(using $popover service)</small>
</button>
<div><a ng-click="hidePopover()">Click to close</a></div>
</div>
</div> </body>
</html>
// JS code
var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
app.controller('MainCtrl', function($scope) {
});
'use strict';
angular.module('mgcrea.ngStrapDocs')
.config(function($popoverProvider) {
angular.extend($popoverProvider.defaults, {
html: true
});
})
.controller('PopoverDemoCtrl', function($scope, $popover) {
$scope.popover = {title: 'Title', content: 'Hello Popover<br />This is a multiline message!'};
var asAServiceOptions = {
title: $scope.popover.title,
content: $scope.popover.content,
trigger: 'manual'
}
var myPopover = $popover(angular.element(document.querySelector('#popover-as-service')), asAServiceOptions);
console.log(myPopover);
$scope.togglePopover = function() {
myPopover.$scope.$show();
};
$scope.hidePopover = function() {
myPopover.destroy();
};
});
Or may be if you are still facing some issue, you can create a plnkr and share.
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"
I am trying to move a block of text up or down when arrows are pressed. I am having troubles getting my directive to change its CSS values when the buttons are pressed.
Here is my HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="app.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="subtitle.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Move Text up or down</h1>
<subtitle class="sub" pos="position">This will move when buttons are pressed</subtitle>
<br>
Position={{position}}
<br>
<br>
<p style="color:red">Click buttons to move text up or down</p>
<i class="fa fa-chevron-up" ng-click="inc()"></i>
<i class="fa fa-chevron-down" ng-click="dec()"></i>
</body>
</html>
Here is my directive:
angular.module('mSystem')
.directive('subtitle', function () {
"use strict";
var
scope = {
pos: "="
},
restrict = 'AE',
link = function($scope, $element, $attrs){
$scope.$watch('pos', function () {
console.log("position is: "+$scope.pos);
$element.css('{top:'+$scope.pos+'px;position:relative;!important}');
$attrs.style="top:'+$scope.pos+'px;position:relative;!important'";
});
};
return {
scope: scope,
link: link,
restrict: restrict
};
});
and here is my app:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.position=20;
$scope.inc=function(){
$scope.position+=1;
}
$scope.dec=function(){
console.log('subtracted');
$scope.position-=1;
}
});
I have created an angular.js plunker here: http://plnkr.co/o99x2Z
The syntax for changing the CSS is a bit different. Try this:
$element.css('top', $scope.pos + 'px');
Updated plunker
You are passing a string to the $element.css(), use an Object instead:
$element.css({ top: $scope.pos+'px', position: 'relative;!important' });
Plunker