Menu
I am trying to create two directives. The first directive appends other predefined angular directives (ng-click and ng-class) to the element and then compiles it so that they work.
The second directive replaces an element for a template which contains the first directive. I use ng-transclude to carry the element's contents over to the template.
The problem is that once the template from directive 2 is added the first directive tries to compile and throws a wobbly:
"TypeError: undefined is not a function"
Directive 1 works fine when ng-transclude is not present in the template. I have created a Plunk to demonstrate this: http://plnkr.co/edit/RdtjIy5XKOsqvh5VnwMr
Is anyone able to help out and point out where I am going wrong?
Thanks, Sam
412
The ng-transclude directive is used to mark the insertion point for transcluded DOM of the nearest parent that uses transclusion. Use transclusion slot name as the value of ng-transclude or ng-transclude-slot attribute.
Compiler is an AngularJS service which traverses the DOM looking for attributes. The compilation process happens in two phases. Compile: traverse the DOM and collect all of the directives. The result is a linking function.
Overview. Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together. The compilation is a process of walking the DOM tree and matching DOM elements to directives. Note: This document is an in-depth reference of all directive options.
After further trial and error I have found a fix and as far as I can tell, there are no side-effects.
I simply remove the ng-transclude attribute from within the second directive. I have an updated Plunk here: http://plnkr.co/edit/9QXkqzzyUy9VvMYC6fO6
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
