I want to use multiple instances of the same directive to render a collection. I am using an isolate scope to map an array to a name in the isolate scope. The link function in the isolate scope correctly sees the mapped array, however ng-repeat in it does not work.
<html ng-app="MyApp">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var MyCtrl = function($scope) {
$scope.blah = [1,2,4,5];
$scope.bar = [14,52,64,25];
}
angular.module("MyApp", [])
.directive("sephBlah", function($parse) {
return {
scope: {
tags: "=sephBlah"
},
link: function(scope, elem, attrs) {
console.log(scope.tags[0]);
}
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<div seph-blah="blah">
<p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
</div>
<div seph-blah="bar">
<p data-ng-repeat="t in tags">{{t}}</p><!-- why this renders nothing? -->
</div>
</body>
</html>
I am not sure why the ng-repeat renders nothing. The link function correctly sees the arrays.
You're not supposed to use directives like this. The sort of functionality you're trying to get here should be done with a controller.
When using directives, use the template or templateUrl attribute to provide content. So this will work:
.directive("sephBlah", function($parse) {
return {
scope: {
tags: "=sephBlah"
},
template: '<p data-ng-repeat="t in tags">{{t}}</p>',
link: function(scope, elem, attrs) {
console.log(scope.tags[0]);
}
}
});
And in the html just do:
<div ng-attr-seph-blah="blah"></div>
Related
I have a simple directive with transcluded html.
I want to be able to inject directive scope params to the transclude.
I wrote a simple example in plunker :
https://plnkr.co/edit/jqyiQdgQxbeTrzyidZYF?p=preview
I know in angular 4 it can be done, but I can't find a good way to do it in angularjs.
// Code goes here
var app = angular.module("app", []);
app.controller("mainCtrl", function($scope) {
$scope.users = ["tal", "oren", "orel", "shluki"];
$scope.deleteUser = (user) => {alert("trying to delete", user);}
});
app.directive('myList', function myList() {
return {
restrict: 'E',
transclude: true,
template: "<div><table><tr ng-repeat='item in collection'><td> This is inside myList - user name: {{item}} <ng-transclude></ng-transclude></td></tr></table></div>",
scope: {
collection: "="
},
replace: true
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<my-list collection="users">
<h2>This is transclude</h2>
<button ng-click="deleteUser(user)">Delete user: {{user ? user : "User name should be here"}}</button>
</my-list>
</body>
</html>
Will really appreicate some help.
plunker: https://plnkr.co/edit/jqyiQdgQxbeTrzyidZYF?p=preview
Here's a working plunker with your example.
http://plnkr.co/edit/BjSowyQdLXd0xoCZFqZ6?p=preview
The idea is to pass it as contents and not html as string. $compile is here because the link is done after ng-repeats already has transcluded its own template.
var template = '<h1>I am foo</h1>\
<div ng-repeat="item in users">\
<placeholder></placeholder>\
<hr>\
</div>';
var templateEl = angular.element(template);
transclude(scope, function(clonedContent) {
templateEl.find("placeholder").replaceWith(clonedContent);
$compile(templateEl)(scope, function(clonedTemplate) {
element.append(clonedTemplate);
});
});
If you want a proper explanation of what the problem was you should check the detailed answer here : Pass data to transcluded element
Hope this helped you out
I have a directive with a template that uses ng-repeat on an anchor tag creating a gallery of anchors. Each anchor also has an ng-click which when clicked calls a parent controller function. To this function is passed the ng-repeat item.
Problem : This item when accessed inside the parent controller method is undefined
Here is a test scenario to simulate the similar situation
<testdirective func="show(x)" items="buttons"></testdirective>
http://plnkr.co/edit/43aNqFS71Jn9vOdh6AG2?p=preview
There are two changes you need to make.
in your index.html make a refrence to your function:
<testdirective func="show" items="buttons"></testdirective>
and in your testdirective change your template like so:
template: '<button ng-repeat="item in items" ng-click="func()(item)" id="submit" />{{item}}</button>',
Notice the change in the ng-click - first brackets is to get a refrence to the function itself and the second is to invoke the function with the paramater.
I also made a fork of your plunker:
http://plnkr.co/edit/nECPbL8YoToi0jP9HJHQ?p=preview
Please tell me if that's what you wanted to achieve
Your directive should bind to a controller, change it as follows,
app.directive("testdirective", function() {
return {
restrict: "E",
controller: 'testController',
template: '<button ng-repeat="item in items" ng-click="show(item)" id="submit" />{{item}}</button>',
scope: {
items: "=",
func: '&'
}
};
});
DEMO
// Code goes here
var app = angular.module('test', []);
app.controller('testController', function($scope) {
$scope.buttons = ['b1', 'b2', 'b3', 'b4', 'b5'];
$scope.show = function(x) {
alert(x);
}
})
app.directive("testdirective", function() {
return {
restrict: "E",
controller: 'testController',
template: '<button ng-repeat="item in items" ng-click="show(item)" id="submit" />{{item}}</button>',
scope: {
items: "=",
func: '&'
}
};
});
<!DOCTYPE html>
<html ng-app='test'>
<head>
<script data-require="angular.js#*" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="testController">
<h1>Hello Plunker!</h1> {{ testValue }}
<testdirective func="show(x)" items="buttons"></testdirective>
</div>
</body>
</html>
I am trying to understand the execution of link function in angular directives. However, I am stuck in a very simple setup. Following is the html code:
<!doctype html>
<html ng-app="demoApp">
<body>
<div ng-controller="DemoController" class="container">
<directiveone directivetwo ></directiveone>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
"demoApp" is defined in app.js as follows:
angular.module('demoApp', [])
.controller("DemoController", function(){
})
.directive("directiveone", function(){
var linker = function(scope, element, attrs){
console.log("directiveone link called");
};
return {
link : linker
}
})
.directive("directivetwo", function(){
var linker = function(scope, element, attrs){
console.log("directivetwo link called");
};
return {
require: "directiveone",
link : linker
};
});
When I run this code, I get the error:
Controller 'directiveone', required by directive 'directivetwo', can't be found!
I am unable to figure out the error here. Documentation suggests it might be a typo, but it is not apparent to me.
Directives default to attribute-only. Your directiveone directive isn't being picked up - you need to specify restrict: 'E' in its definition, or apply it as an attribute (<div directiveone directivetwo>...)
Below is my code
I created a simple page and include a directive in it. And on ng-click in directive i want to call parent scope's method.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Directive Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"> </script>
</head>
<body>
<div ng-app="myapp" ng-controller="myController">
<ul-dir on-item-click="itemClick(obj)"></ul-dir>
</div>
</body>
</html>
<script>
var myapp = angular.module("myapp", []);
myapp.directive('ulDir', function() {
return {
restrict: 'E',
replace: 'true',
template: '<div id="container"><ul><li ng-repeat="content in contents">{{content.name}}</li></ul></div>',
controller: function ($scope) {
$scope.contents = [{'name':'Nishu', 'age':'20'},{'name':'Nidhi', 'age':'21'},{'name':'Kirti', 'age':'24'}];
},
scope: {
onItemClick: '&' // Pass a reference to the method
}
}
});
myapp.controller('myController', function($scope) {
$scope.itemClick = function(content){
console.log("Success : "+content);
};
});
</script>
So my console log print as "success : undefined"
So content object not passing from directive scope to parentscope.
Please help me.
I believe your call inside template should either be:
<a href="#" ng-click="onItemClick({'content':content})">
or
<a href="#" ng-click="onItemClick({'obj':content})">
Can you try. For more details see this SO post Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?
Consider the following code (http://jsbin.com/IfejIWES/1/):
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div ng-controller="MyCtrl">
<div my-directive>
<button>some button</button>
and a link
</div>
</div>
</body>
</html>
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
//$scope.log=[];
}
myApp.directive('myDirective', function(){
return{
transclude: true,
template: '<div class="something" ng-transclude> This is my directive content</div>'
};
});
Using version 1.1.3 of AngularJS, the output combines the button and anchor from my-directive (in the HTML) with the template inner text 'This is my directive content'.
If I change the version to 1.2.1 the my-directive content replaces the template inner text.
Is there a way to have angular 1.2.1 (and later) do the older behavior?
No. This was a very intentional change. See this commit.
The link provided by Jeff Hubbard (thanks Jeff) started me in the right direction. From the comments of that post somebody (https://github.com/angular/angular.js/commit/eed299a31b5a6dd0363133c5f9271bf33d090c94#commitcomment-4685184) posted a work around: http://plnkr.co/edit/EjO8SpUT91PuXP0RMuJx?p=preview
Essentially, you can get the old behavior back by changing the JavaScript to use the transcludeFn function in a separate directive. See below my updated code:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
}
myApp.directive('myDirective', function(){
return{
transclude: true,
template: '<div class="something" ng-transclude-append> This is my directive content</div>'
};
});
myApp.directive('ngTranscludeAppend', function() {
return function(scope, element, attrs, ctrl, transcludeFn) {
if (!transcludeFn) return;
transcludeFn(function(clone) {
element.append(clone);
});
};
});
Link to my updated jsbin: http://jsbin.com/IfejIWES/3/
One last note, I tried embedding the transcludeFn in my link function directly like:
link: function(scope, element, attrs, ctrl, transcludeFn) {
transcludeFn(function(clone) {
element.append(clone);
});
}
But this had the effect of creating the button and anchor twice. Moving it out into its own directive solved it for me.