I have a directive, in this directive we compile ngRepeat as you see.
my problem is :
I can't call $scope.delete() from controller, and i don't know how can compile it in my directive.
Note: run the sample
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $http) {
var root = "http://jsonplaceholder.typicode.com";
$scope.list = [];
$http.get(root + "/users").success(function (data) {
$scope.list = data;
});
///i can't call this scope
$scope.delete = function (item) {
alert("delete called");
}
});
app.directive("mydata", ["$compile", "$filter", function ($compile, $filter) {
return {
restrict: "A",
scope: {
list: "="
},
link: function (scope, element) {
var ngRepeat = element.find(".repeat").attr("ng-repeat", "item in list");
$compile(ngRepeat)(scope);
}
}
}]);
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title></title>
</head>
<body>
<ul id="parent" mydata data-list="list">
<li class="repeat">
{{item.name}}
<button ng-click="delete()">delete</button>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Don't know why u are trying to do stuffs like this but a quick solution for your code is to compile the ngRepeat with the controller's scope instead of the directive the scope;
$compile(ngRepeat)(scope.$parent);
Your delete() won't fire since u are creating an isolated scope on your my-data directive. The delete() method will not get inherited.
For more conception about isolated scope and scope inheritance, check https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive and https://docs.angularjs.org/guide/scope
Related
Angular 1.4.8
How can I create directive elements programmatically inside a controller? I tried $compile but it doesn't work for me.
Controller and directive
angular.module('plunker', [])
.controller('MainCtrl', function ($scope, $compile) {
var container = angular.element(document.getElementById('container'));
$scope.user = {item: 'Axe'};
var item = angular.element(document.createElement('anItem'));
item = $compile(item)($scope);
container.append(item);
})
.directive('anItem', function(){
return {
templateUrl: 'template.html'
};
});
template.html
<p>Item: {{user.item}}</p>
index.html
...
<body ng-controller="MainCtrl">
<div id="container"></div>
</body>
...
Here is my plunker: http://plnkr.co/edit/XY6C6J70PjQTrjiwjHSz?p=preview
While the name of the directive is "anItem", the DOM elements are named "an-item". This is just the Angular naming convention. This works:
document.createElement('an-item')
Here is the updated Plunker.
var elm = angular.element('<an-item"></an-item>');
container.append(elm);
scope.$applyAsync(function () {
$compile(elm)(scope);
});
I need some help on better understanding custom animations in AngularJS 1.3.
The objective
Click on an element
Animate separate element on the DOM
I have created the following plunkr with no success
http://plnkr.co/edit/zg3BglCY9VfgPJc2pfNg?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<ul>
<li animate-trigger> Click on me to animate </li>
</ul>
<div class="divtoanimate animated">
Animate Action Baby
</div>
</body>
</html>
JS
'use strict';
var app = angular.module('app', ['ngAnimate'])
app.directive('animateTrigger', ['$animate', function ($animate) {
return function (scope, elem, attrs) {
elem.on('click', function (elem) {
var el = angular.element(document.getElementsByClassName("divtoanimate"));
console.log("clicked");
var promise = $animate.addClass(el, "bounceIn");
promise.then(function () {
$animate.removeClass(el, "bounceIn");
});
});
}
}]);
Use $scope.apply for the initial animation and inside your promise to both add and remove the classes. Check out the code below and the attached plunkr, which demonstrates the animation repeating each time the animage-trigger directive is clicked.
working-plunkr
var app = angular.module('app', ['ngAnimate'])
app.directive('animateTrigger', ['$animate', function ($animate) {
return function (scope, elem, attrs) {
elem.on('click', function (elem) {
scope.$apply(function() {
var el = angular.element(document.getElementsByClassName("divtoanimate"));
var promise = $animate.addClass(el, "bounceIn");
promise.then(function () {
scope.$apply(function() {
$animate.removeClass(el, "bounceIn");
});
});
});
});
}
}]);
Since you're using the jquery event handler, you need to call scope.$apply(function() {...}) to perform your $animate calls.
Here's plunkr updated with scope.$apply:
http://plnkr.co/edit/qOhLWze8pGkO9dGRp1Sg?p=preview
More on scope.$apply:
https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()
I have a custom directive and I would like to use it to include an html content to the document after clicking on it.
Plunker: http://plnkr.co/edit/u2KUKU3WgVf637PGA9A1?p=preview
JS:
angular.module("app", [])
.controller("MyController", function ($scope) {
})
.directive('addFooter', ['$compile', '$rootScope', function($compile, $rootScope){
return {
restrict: 'E',
template: '<button>add footer</button>',
controller: 'MyController',
link: function( scope, element, attrs, controller) {
element.bind( "click", function() {
scope.footer = "'footer.html'";
})}
};
}])
HTML:
<body ng-app="app">
<script type="text/ng-template" id="footer.html">
FOOTER
</script>
<div ng-controller="MyController">
<add-footer></add-footer>
<div ng-include="footer"></div>
</div>
</body>
Not sure why it is not working, as it worked fine before it was moved into the directive. Outside the directive, I was also referencing to $scope.footer with some link. I tried using $rootScope, but also no effect. Any tips please?
First. Remove unnecessary quote symbols:
element.bind( "click", function() {
scope.footer = "footer.html"; // not "'footer.html'"
});
Second. You should notify angularjs that you have asynchronously updated scope values:
element.bind("click", function() {
scope.$apply(function() {
scope.footer = "footer.html";
});
});
Or like that
element.bind("click", function() {
scope.footer = "footer.html";
scope.$apply();
});
I created this simple plunker to demonstrate the problem:
http://plnkr.co/edit/xzgzsAy9eJCAJR7oWm74?p=preview
var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.items = {};
})
app.directive('myDirective',function(){
return {
restrict: 'E',
scope: {
item: "=item"
},
template: "<h2>ng-repeat: </h2>" +
"<button ng-repeat='i in [1,2,3]' ng-click='item = true'>Set to true</button>" +
"<h2>no ng-repeat: </h2>" +
"<button ng-click='item = false'>Set to false</button>"
}
})
<body ng-controller='ctrl'>
<h1>Item: {{items.someItem}}</h1>
<my-directive item='items.someItem'></my-directive>
</body>
Two way data binding works when I pass a model to the directive, unless it is accessed from inside of ng-repeat.
Why is this happening and how to solve this problem?
You find answer here. Briefly, ng-repeat create a new scope, a primitive data type (boolean, integer, ...) copied by value in the new scope. But objects ({}, []) copied by pointer (not value) and it be same in the new scope and parents scope.
Edited:
I solved your case plnkr
Html:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller='ctrl'>
<h1>Item: {{items.someItem}}</h1>
<my-directive item='items.someItem'></my-directive>
</body>
</html>
JavaScript:
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.items = {};
})
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
extItem: "=item"
},
template: "<h2>ng-repeat: </h2>" +
"<button ng-repeat='i in [1,2,3]' ng-click='intItem.val = true'>Set to true</button>" +
"<h2>no ng-repeat: </h2>" +
"<button ng-click='intItem.val = false'>Set to false</button>",
link: function(scope, element, attrs) {
scope.intItem = {
val: scope.extItem
};
scope.$watch('intItem.val', function(){scope.extItem = scope.intItem.val})
}
}
})
In this solution I'm create internal object intItem with Boolean property val, which passed into ng-repeat and added $watch for intItem.val.
I have ng-click="foo()" which alert "foo"
In my own directive, if ng-click is found, I want to add another function to alert "bar"
I tried this
DEMO: http://plnkr.co/edit/1zYl0mSxeLoMU3yjoGBV?p=preview
and it did not work
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.foo = function() { alert('foo'); }
$scope.bar = function() { alert('bar'); }
});
app.directive("myAttr", function() {
return {
link: function(scope, el, attrs) {
el.attr('ng-click', attrs.ngClick+';bar()');
}
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<a my-attr ng-click="foo()" href="">click here!</a>
</body>
</html>
I was also not able to another ng-* directive to this to make it work, i.e. el.attr('ng-focus', 'bar()');. It seems that I cannot change or add ng-* directive once it is rendered.
How can I achieve this, and what was I doing wrong?
app.directive("myAttr", function() {
return {
priority: 1,
compile: function(el, attrs) {
attrs.ngClick += ';bar()';
}
}
})
First of all you want a compile function, for when link is called, the ng-click directive is already set up.
The second important thing is to change the priority. You want to ensure that your directive is called before ng-click. ng-click has the default priority 0, so 1 is enough.
The last and important thing, which is not obvious, is that you don't want to change the element, but attrs itself. It is created only once per element. So when ng-click accesses it it would still contain the same value, if you changed the attribute on the element directly.
I think you can do what you want with ngTransclude.
app.directive("myAttr", function() {
return {
transclude:true,
template: '<span ng-click="bar()" ng-transclude></span>',
link: function(scope, el, attrs) {
}
}
});
Does that work?
EDIT
Okay what about this one?
app.directive("myAttr", function($compile) {
return {
link: function(scope, el, attrs) {
el.attr('ng-click', 'bar()');
el.removeAttr('my-attr');
$compile(el)(scope);
}
}
});
While this could be done with compile as outlined above, that approach doesn't guarantee the order in which the ng-click items would be added to a DOM node (as you have already discovered), and is inherently slow (as has been pointed out by Words Like Jared.
Personally, I would just do something like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.foo = function() { alert('foo'); }
$scope.bar = function() { alert('bar'); }
});
app.directive('myAttr', function() {
return {
scope: true,
link: function(scope, el, attrs) {
if(attrs.hasOwnProperty('ngClick')){
scope.foo = function(){
scope.$parent.foo();
scope.$parent.bar();
}
}
}
};
});
</script>
</head>
<body ng-controller="MyCtrl">
<a my-attr ng-click="foo()" href="">click here!</a>
</body>
</html>
Whats going on:
scope: true: By default directives do not create new scopes, simply sharing their parent scope. By setting scope: true, every instance of this directive will create a child scope, that will prototypically inherit from the parent scope.
Then you can simply override the method desired (foo()) and voila
Live demo:
http://plnkr.co/edit/8A8y96wAhqGEowFaRQUH?p=preview
I freely admit I may entirely misunderstand what you are trying to do. However, given the example you provided, I think you might be better served by separating concerns a little more.
It seems from your example that you are trying to trigger foo and bar together whenever your directive is present. If both foo and bar are concerns of the controller, then why not wrap them both up in another function and assign that function to the ng-click of your element. If foo is a concern of the controller, but bar is a concern of the directive, why not trigger the bar functionality directly from the directive code?
If the functionality wrapped up in 'foo' and 'bar' is suppose to be defined by the controller creator...
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.foo = function() { alert('foo'); }
$scope.bar = function() { alert('bar'); }
$scope.pak = function() {
$scope.foo();
$scope.bar();
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<a ng-click="pak()" href="">click here!</a>
</body>
</html>
Or, if the functionality wrapped up in 'foo' is suppose to be defined by the controller creator, but the functionality wrapped up in 'bar' is suppose to be defined by the directive creator...
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.foo = function() { alert('foo'); }
});
app.directive('myAttr', function(){
return {
link: function(scope, element, attrs){
element.click(function(){
alert('bar');
});
}
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<a ng-click="foo()" href="">click here!</a>
</body>
</html>