In my directive i using appendTo and ng-click inside it:
$("<div>" + "<a href='' ng-click='addIt()' + user + "</a></div>").appendTo '.user-class'
And ng-click doesn't work. Should i use $compile? How to use it in that case?
-
YES, you need to compile it, angular directives will bind to scope properties :)Kalhan– Kalhan2015-07-17 10:46:48 +00:00Commented Jul 17, 2015 at 10:46
-
to me this code looks a lot like there is a cleaner angular solution to this. What are you trying to achieve?LionC– LionC2015-07-17 11:15:24 +00:00Commented Jul 17, 2015 at 11:15
-
@LionC this code is a part of directive that make dropdown menu from json. There is no option to move this to directive template, so need to find solution how to make 'ng-click' works here.Shulte– Shulte2015-07-17 11:22:17 +00:00Commented Jul 17, 2015 at 11:22
-
1You should be able to move this to the template, there's nothing I'm looking at here that would suggest otherwise. What parts can't be moved?Mathew Berg– Mathew Berg2015-07-17 11:26:48 +00:00Commented Jul 17, 2015 at 11:26
-
as @MathewBerg said, I do not see why this should not be moveable to a template. Bind your data to the directives controller and use ng-repeat adn ng-click in your template.LionC– LionC2015-07-17 12:17:27 +00:00Commented Jul 17, 2015 at 12:17
Add a comment
|
2 Answers
this code is a part of directive that make dropdown menu from json. There is no option to move this to directive template, so need to find solution how to make 'ng-click' works here.
Like Matthew, I am most curious as to which part(s) cannot be moved out into an external template / internal template function. It doesn't make much sense to me to have to re $compile a directive only to add a ng-click handler.
The senseful way would be to add the ng-click directive to a template. Either an external one, or a function returning a string value in the directive definition object.
Running $compile after the link step has finished is not a good idea performance wise, seeing as how it recompiles the entire DOM element your directive is attached to. Avoid doing so for as long as you possibly can.
.directive('myDir', function () {
return {
template: function (/*element, attrs*/) {
return '<div><a href="" ng-click="addIt(user)">{{::user}}</a></div>';
},
link: function (scope, el, attrs) {
scope.user = 'John';
}
};
});
This would result in the following DOM structure:
<div>
<a href="" ng-click="addIt(user)">John</a>
</div>
2 Comments
LionC
I would avoid the link function (and therefore fiddling with the scope) and just use the scope property of the DDO or even better, the bindToController property together with controllerAs. Makes the code a lot more fitting with current standards and future proof for 2.0
Yes you will need $compile , inject $compile in directive and you can do it like this :
var link = $compile("<div>" + "<a href='' ng-click='addIt()'" + user + "</a></div>")(scope);
link.appendto('.user-class');
