angularjsangularjs-directiveangular-directiveangularjs-ng-transcludeangular-template

Angularjs directive with dynamic template and transclude


I'm trying add a dynamic template and met problem with transclude.

This is dynamic template function:

var getTemplate = function(contentType){
      var template = '<button style="cursor: pointer;">' + contentType + '<ng-transclude></ng-transclude></button>'
      return template;
    };

And this is code to call the dynamic template and update transclude:

element.html(getTemplate(attr.firstname));

transclude($scope.$parent, function (clone, $scope) {
          element.children().append(clone);
        });

Look at full code here https://plnkr.co/edit/cQBeiDkEb8KwhrFWb8iR?p=preview

View the console i see this notice: angular.js:13920TypeError: transclude is not a function

The result should be included: Go button.

Go button code here:

<my-button firstname="John"><button style="cursor: pointer;"><i style="color: green;">Go</i></button></my-button>

Please help me to fix it.

This is docs i used: docs

Thank you very much.


Solution

  • In the plunkr the path to angular script was not found. Changing to <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> and i see the error "angular.js:13920TypeError: transclude is not a function ..."