AngularJ排除了在Directive模板或templateURL中不起作用

Question

I have written a custom directive like so, notice I have commented out the template URL that contains the same HTML structure and the template property:

.directive('sillyDirective', function ( ) {
        'use strict';
        return {
            restrict: 'A',
            replace: false,
            transclude: true,
            template: '<h2>Welcome to my site</h2>',
            //templateUrl: '/views/hello.html' ,
            link: function (scope, element, attrs) {

                element.bind('click', function (){
                    alert('you click me! I am clicked');
                });
            };
});

In my HTML view I have the following...

<div data-silly-directive>
   <div><img src="logo.jpg></div>
   <div><h1>My First Website</h1></div>
</div>

The problem is the content of the directive, eg:

   <div><img src="logo.jpg></div>
   <div><h1>My First Website</h1></div>

is being overwritten with the template content even thought I have set transclude to true and replace to false? What am I doing wrong here?

Answer 1

Your template must contain an element with an ng-transclude attribute. That's where the body will be "pasted" by angular.

See https://docs.angularjs.org/api/ng/directive/ngTransclude

Answer 2

you need to specify ng-transclude in the template of your directive, this will let angular know where to insert the content of the markup.

app.directive("foo", function() {
  return {
    transclude: true,
    template: "<div>the template</div><div ng-transclude></div>"
  };
})

html:

<div foo>
  Some Content Here
</div>

result:

<div foo>
  <div>the template</div>
  <div ng-transclude>Some Content Here</div>
</div>

here's a plnkr

source: https://www.accelebrate.com/blog/angularjs-transclusion-part-1/