Question

我已经写了一个这样的自定义指令，请注意我已经注释掉了包含相同HTML结构和模板属性的模板URL：

.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');
                });
            };
});

在我的HTML视图中，我有以下内容......

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

问题是指令的内容，例如：

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

即使我将transclude设置为true而replace设置为false，

也会被模板内容覆盖？我在这做错了什么？

Answer 1

您的模板必须包含具有ng-transclude属性的元素。那个身体将被粘贴的地方＆＃34;通过角度。

请参阅 https://docs.angularjs.org/api/ng/directive/ngTransclude

Answer 2

你需要在你的指令的模板中指定ng-transclude，这将让angular知道在哪里插入标记的内容。

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

HTML：

<div foo>
  Some Content Here
</div>

结果：

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

这里是plnkr

来源：https://www.accelebrate.com/blog/angularjs-transclusion-part-1/

AngularJs转换为不在Directive模板或templateURL中工作

2 个答案: