Hi I'm trying to dynamically add a directive inside another using the same DOM+compile method but looks like there's an issue when the child directive has a "require" attribute. In that case, it cannot locate the required parent controller for some reason.
Here's an example : http://plnkr.co/edit/eLPNusPMOdcd9lozQyrc?p=preview Any idea ? Thanks :) On Monday, March 25, 2013 2:59:58 PM UTC+1, Clint Checketts wrote: > > Here is the plunk: http://plnkr.co/edit/7AkS5oXc9h2L6L6pfmJB > > app.directive('fruit', function($compile) { > var appleTemplate = "<div>I am an {{item.type}}, my id is: {{item.id > }}</div>"; > var otherTemplate = "<div>I have an id of {{item.id}} am a > {{item.type}}</div>"; > > return { > scope: {item:"=fruit"}, > restrict: 'E', > link: function(scope, element, attrs) { > if(scope.item.type === 'apple'){ > element.html(appleTemplate); > }else { > element.html(otherTemplate); > } > $compile(element.contents())(scope); > } > }; > }); > > > On Mon, Mar 25, 2013 at 7:59 AM, Clint Checketts > <[email protected]<javascript:> > > wrote: > >> Ang, >> >> Your example seems overly complicated. Do you really require so many tiny >> directives? If you are merely trying to swap out templates. Here is how >> I'd solve it: >> >> app.directive('fruit', function($compile) { >> var appleTemplate = "<div>I am an {{item.type}}, my id is: {{item.id >> }}</div>"; >> var otherTemplate = "<div>I have an id of {{item.id}} am a >> {{item.type}}</div>"; >> >> return { >> scope: {item:"=fruit"}, >> restrict: 'E', >> link: function(scope, element, attrs) { >> if(scope.item.type === 'apple'){ >> element.html(appleTemplate); >> }else { >> element.html(otherTemplate); >> } >> $compile(element.contents())(scope); >> } >> }; >> }); >> >> >> On Sat, Mar 23, 2013 at 11:07 PM, Ang Lee <[email protected] <javascript:> >> > wrote: >> >>> @Josh and @Clint: >>> Thank you both very much. I think I will just do 'fruit.id' then. >>> >>> My goal was to reuse the 'apple' and 'orange' directives in the >>> scenarios that the fruits are not stored in an array and not using ngRepeat >>> (hence wanted to get rid of the 'fruit' iterator). Actually I need more >>> help (sorry for keep raising new questions): >>> say, I want a 'twoApplePack' directive, something like: >>> http://jsfiddle.net/anglee/emQNa/9/ >>> >>> essentially, >>> app.directive('twoApplePack', function() { return { >>> //template: '<apple></apple><apple></apple>' <-- what would the >>> template be? >>> controller: function($scope) { >>> $scope.apple1 = {type: "apple", id: "004"}; >>> $scope.apple2 = {type: "apple", id: "005"}; >>> }, >>> //link: ??? need a linking function ??? >>> };}); >>> to get: >>> >>> <apple> >>> <div>I am an apple, my id is: 004</div> >>> </apple> >>> <apple> >>> <div>I am an apple, my id is: 005</div> >>> </apple> >>> >>> >>> PS, @Josh: Thanks again. I did try your way, but 'extend' seems to break >>> the binding I wanted. >>> I added a update button to test updating model. >>> This one doesn't update: http://jsfiddle.net/anglee/emQNa/6/ >>> This one updates: http://jsfiddle.net/anglee/emQNa/8/ >>> >>> >>> >>> On Sunday, March 24, 2013 12:03:28 AM UTC-4, joshkurz wrote: >>> >>>> yes it does, but I did that to prove that the fruit object is not >>>> available even in the parent scope as that was what I thought the goal >>>> was. >>>> The Isolate scope was created manually by using the true parameter in the >>>> $new() function. This manually created isolated scope was used to compile >>>> the element, so really there is no need to use scope at all inside the >>>> apple directive as it already has an isolate from the fruits directive. >>>> >>>> >>>> On Sat, Mar 23, 2013 at 11:57 PM, Clint Checketts <[email protected]>wrote: >>>> >>>>> @Josh: Doesn't scope:true make it a child scope, not an isolate scope? >>>>> >>>>> @ang: I'd recommend against flattening your scope out too much. See >>>>> 'The Dot' for an explanation of how child scopes and prototypal >>>>> inheritance >>>>> might give you so surprises: http://egghead.io/video/ >>>>> angularjs-the-dot/ >>>>> >>>>> >>>>> On Sat, Mar 23, 2013 at 8:41 PM, Josh Kurz <[email protected]> wrote: >>>>> >>>>>> You can create a new scope and use it to compile the element with >>>>>> instead of the scope created by ngRepeat. What will happen is a new >>>>>> scope >>>>>> is created and true should be used to make it an isolate. Then just use >>>>>> the >>>>>> new scope that has been created to extend the fields from fruit and pass >>>>>> this new scope into the compile function to render the element. >>>>>> >>>>>> >>>>>> >>>>>> On Sat, Mar 23, 2013 at 10:23 PM, Ang Lee <[email protected]> wrote: >>>>>> >>>>>>> I see. Thanks, Josh. >>>>>>> But I guess this means if I have more properties with an apple >>>>>>> instance, I will have code like: >>>>>>> scope.id = scope.fruit.id >>>>>>> scope.color = scope.fruit.color >>>>>>> scope.weight = scope.fruit.weight >>>>>>> scope.AAA = scope.fruit.AAA >>>>>>> ... >>>>>>> I am wondering if I can create a new scope and have it bind to the >>>>>>> original scope.fruit. so something like: >>>>>>> scope = new Scope(scope.fruit); >>>>>>> >>>>>>> >>>>>>> On Saturday, March 23, 2013 9:28:58 PM UTC-4, joshkurz wrote: >>>>>>> >>>>>>>> You could just create that scope.id variable from the >>>>>>>> scope.fruit.id and then call that in the template instead of >>>>>>>> fruit.id. http://jsfiddle.net/emQNa/4/ >>>>>>>> >>>>>>>> >>>>>>>> On Sat, Mar 23, 2013 at 9:15 PM, Ang Lee <[email protected]> wrote: >>>>>>>> >>>>>>>>> I have a model, a fruit basket holding an array of fruits. I want >>>>>>>>> to create an Angular directive 'fruitBasket' to create the DOM >>>>>>>>> elements >>>>>>>>> base on the types of fruits in the basket. >>>>>>>>> Here is the solution I came up with so far. It generally do what I >>>>>>>>> want but I am wondering if I can do better: >>>>>>>>> http://jsfiddle.net/anglee/emQNa/ >>>>>>>>> >>>>>>>>> As you can see in the fiddle above, I have for the 'apple' >>>>>>>>> directive template: >>>>>>>>> <div>I am an apple. id = {{fruit.id}}</div> >>>>>>>>> >>>>>>>>> I am wondering how I can set the scope (or do anything) to make it >>>>>>>>> so that >>>>>>>>> for the apple template I can do this instead: >>>>>>>>> <div>I am an apple. id = {{id}}</div> >>>>>>>>> >>>>>>>>> Thanks! >>>>>>>>> >>>>>>>>> -- >>>>>>>>> You received this message because you are subscribed to the Google >>>>>>>>> Groups "AngularJS" group. >>>>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>>>> send an email to [email protected]. >>>>>>>>> To post to this group, send email to [email protected]. >>>>>>>>> >>>>>>>>> Visit this group at http://groups.google.com/group >>>>>>>>> /angular?hl=en-US. >>>>>>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>>>>>> >>>>>>>>> >>>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> *Josh Kurz* >>>>>>>> <http://dillingermediaonline.com/wordpress> >>>>>>>> http://dillingermediaonline.com >>>>>>>> >>>>>>>> -- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "AngularJS" group. >>>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>>> send an email to [email protected]. >>>>>>> To post to this group, send email to [email protected]. >>>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US. >>>>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>>>> >>>>>>> >>>>>>> >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> *Josh Kurz* >>>>>> <http://dillingermediaonline.com/wordpress> >>>>>> http://dillingermediaonline.com >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "AngularJS" group. >>>>>> To unsubscribe from this group and stop receiving emails from it, >>>>>> send an email to [email protected]. >>>>>> To post to this group, send email to [email protected]. >>>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US. >>>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>>> >>>>>> >>>>>> >>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "AngularJS" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> To post to this group, send email to [email protected]. >>>>> Visit this group at http://groups.google.com/group/angular?hl=en-US. >>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>> >>>>> >>>>> >>>> >>>> >>>> >>>> -- >>>> *Josh Kurz* >>>> <http://dillingermediaonline.com/wordpress> >>>> http://dillingermediaonline.com >>>> >>>> -- >>> You received this message because you are subscribed to the Google >>> Groups "AngularJS" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected] <javascript:>. >>> To post to this group, send email to [email protected]<javascript:> >>> . >>> Visit this group at http://groups.google.com/group/angular?hl=en-US. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >>> >>> >> >> > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
