CODEWITHSUNDEEP
angularjsangularjs-directive
Frédérand Ouweric
Frédérand Ouweric

Reputation: 23

Call the link function of transcluded directive without ng-transclude

Using transclusion on a directive along with ng-transclude in its template will call the link functions of possible nested-directive. E.g. having item2 directive nested into item1 (See Plunkr):

  <item1>
    <item2>some text 1</item2>
    <item2>some text 2</item2>
    <item2>some text 3</item2>
  </item1>

With the two directives defined as

angular.module('someApp', [])

.directive('item1', function() {
    var linkFn = function(scope, element, attrs, nullCtrl, transcludeFn) {
      console.log('item1- linkFn');
    };

    var controllerFn = function($scope, $element, $attrs) {
        console.log('item1 - controllerFn');
        $scope.itemTab = [];
        this.addItem = function(item) {
            $scope.itemTab.push(item);
            console.log(item);
        };
    };

    return {
        restrict: 'E',
        transclude: true,
        controller: controllerFn,
        link: linkFn,
        template: '<li ng-repeat="item in itemTab">{{item.text}}</li><p ng-transclude></p>'
    };
})

.directive('item2', function() {
    var linkFn = function(scope, element, attrs, item1Ctrl) {
        console.log('item2 - linkFn');
        item1Ctrl.addItem({ text: element.text() });
    };

    return {
        restrict: 'E',
        require: '^item1',
        link: linkFn
    };
});

We have the following output

item1 - controllerFn
item2 - linkFn
Object {text: "some text 1"}
item2 - linkFn
Object {text: "some text 2"}
item2 - linkFn
Object {text: "some text 3"}
item1- linkFn

Because of <p ng-transclude></p>. Since I use <li ng-repeat="item in itemTab">{{item.text}}</li> to manually display, in some way, the content of the nested item2 directives, I don't want to use ng-transclude.

Then if I only remove <p ng-transclude></p> from the template

template: '<li ng-repeat="item in itemTab">{{item.text}}</li>'

.., the nested item2 directives link function are not anymore called and the output is 

item1 - controllerFn
item1- linkFn

How to call the link function of transcluded directive without ng-transclude?

Upvotes: 2

Views: 505

Answers (1)

Amerrnath
Amerrnath

Reputation: 2407

The problem with your Directive is item1 is 

    template: '<li ng-repeat="item in itemTab">{{item.text}}</li>'

will replace the child nodes.(since there is no tansclusion) so Your child directives item2

     `<item2>some text 3</item2>`

will not be parsed by the angular. So item2 directive is not parsed.

And one more thing in your plunker code please add ng-app at the body of the markup.

Upvotes: 0

Related Questions