CODEWITHSUNDEEP
angularjsangularjs-directiveangular-directiveangularjs-ng-transcludeangular-template
Lighthouse Nguyen
Lighthouse Nguyen

Reputation: 87

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.

Upvotes: 1

Views: 997

Answers (2)

Lighthouse Nguyen
Lighthouse Nguyen

Reputation: 87

I have fixed done this problem.

this is new example code: HTML CODE:

<div ng-controller="MyCtrl">
<my-directive title="nguyen hai dang">
<button>some button</button>
<a href="#">and a link</a>
</my-directive>
</div>

JS CODE:

var myApp = angular.module("myApp",[]);

function MyCtrl($scope) {
    $scope.log=[];
}

myApp.directive("myDirective", function(){
    return{
    restrict: "E",
    replace: true,
        transclude: true,
    scope: {
            title: "@"
          },
        template: "<div class=\"something\" ng-transclude>{{title}} </div>"
    };
});

Check code here enter link description here

Upvotes: 0

SaiNageswar S
SaiNageswar S

Reputation: 1336

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 ..."

Upvotes: 2

Related Questions