angularjs transclude not working in my customized directive

Question

Can any one take a look at my simple directive and figure out why the transclude is not working?

html:

<div ng-app="app">
<div ng-controller="MainController">
    <p>Your name</p><input ng-model="name"></input><button ng-click="greeting()">click</button>
    <greeter nationality="English" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="French" name="{{name}}">Hahahahah</greeter>
    <greeter nationality="Russian" name="{{name}}">Hahahahah</greeter>
</div>    
</div>

js:

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



app.controller("MainController", function($scope) {

});

app.directive("greeter", function() {
  return {
    restrict: "AE",
    scope: {
      name: "@",
      nationality: "@"
    },
    transclude: true,
    template: "<div style='display:block'>{{name}}<div ng-transclude></div></div>",
    link: function(scope, elem, attr, ctrl) {
      scope.$watch("name", function() {
        elem.html(greeting + " " + scope.name);
      });
      var greeting = "";
      if (scope.nationality === "English") {
        greeting = "Hello";
      }
      else if (scope.nationality === "French") {
        greeting = "Bonjour";
      }
      else {
        greeting = "Howdy";
      }
    }
  };
});

j.wittwer · Accepted Answer · 2014-05-12 04:29:16Z

1

You are overwriting the transcluded content when you insert the greeting text with elem.html(...).

Rather than manipulate the DOM with jqLite, you can include the greeting text directly in your template. For this to work, greeting must be a scope property (scope.greeting instead of var greeting).

template: "<div style='display:block'>{{greeting}} {{name}}<div ng-transclude></div></div>",
link: function(scope, elem, attr) {
  if (scope.nationality === "English") {
    scope.greeting = "Hello";
  } else if (scope.nationality === "French") {
    scope.greeting = "Bonjour";
  } else {
    scope.greeting = "Howdy";
  }
}

If you want to try the code for yourself, here it is on Plunkr.

answered May 12, 2014 at 4:29

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs transclude not working in my customized directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related