I want to be able to have the second directive phone compiled to alert, how should I do this
<div ng-app="website">
<div ng-controller="MyController">
<div phonebook="phone"> PhoneBook</div>
</div>
</div>
-
Nice that you supplied a Fiddle for your problem. Worse that the code is missing in the question, so probably most user will skip this question. Make sure everybody understands your question just from reading it.TheHippo– TheHippo2013-05-21 16:25:47 +00:00Commented May 21, 2013 at 16:25
-
Yes, you should clarify your question, users should't have to go to the fiddle just to know what the problem actually is.Tiago Roldão– Tiago Roldão2013-05-21 16:29:47 +00:00Commented May 21, 2013 at 16:29
Add a comment
|
1 Answer
Your problem is that you are using ng-class as a declarative class (to instantiate directives). That will not work, as the classes that ng-class adds to the elements are added AFTER compilation, and as such are not recognized by the $compile function.
Replacing
var template = '<div ng-class="{phone2: number}" >Phone</div>';
With
var template = '<div class="phone2">Phone</div>';
Will make it work.
I did not understand why you associated the number with the phone2 directive you wanted to instantiate but I figure it is one of two things: either to include it conditionally, or to bind the numbermodel to the directive. If you want to create a conditionally appearing directive, one way would be to use ng-switch, including the directive below it.
If what you wanted was to create a data binding, however, you would do it as such:
var template = '<div class="phone2" data-number="number">Phone</div>';
including a reference to the binding in the directive:
.directive('phone2', function($compile){
return {
restrict: 'AC',
scope:{number:"="},
link: function(s,e,a,c){
Posted a slighly mended edit of your code here: http://jsfiddle.net/aPWg8/2/
3 Comments
user2167582
thanks tiago, your provided a solution to my specific case, but what I really want to know is how may I compile at a desired time during execution of the link; b/c I do infact have dynamically assigned ng-model values, as well as other attributes. So my real question is how to compile html elements into understanding angular directives during user defined execution blocks.
Tiago Roldão
But that is what is resolved here - the only difference is that instead of creating a simple template string, compiling it and appending it in the link function, you could dynamically create your template (depending on the passed vars/choices) in a function, called from the controller, when you wanted it to.
user2167582
does this allow dynamically generated ng-model strings, b/c the code would required compiling 2 or even more times, if I have ng-model="modelName[0]", ng-class="directive1, directive2",