Question

我一直在寻找this tutorial，现在我正试图关注它。但不知何故，当我到达下面的JSBin并将其全部粘贴到我的测试文件夹上时，它只是无法工作：

http://teropa.info/blog/2015/06/09/transclusion.html

您可以在右侧看到卡片完美显示。好吧，当我复制粘贴此代码时，内容不会在＆＃34;内容＆＃34;内部呈现。模板的div，这意味着转换根本不起作用。

可能会发生什么？代码完美粘贴，包括HTML，CSS和JS。甚至尝试使用我当地版本的Angular（最后一个）。

但内容一直被隐藏！对此有何帮助？我真的想了解这项翻译是如何运作的。

Answer 1

考虑我已经创建了一个名为myDirective的指令作为元素

<div ng-controller="myCtrl">
   <my-directive>
      <button>some button</button>
      <a href="#">and a link</a>
   </my-directive>
</div>

myDirective有一个使用transclude的模板

myApp.directive('myDirective', function(){
   return{
     restrict: 'E',
     transclude: true,
     template: '<div class="something" ng-transclude> my directive goes here...</div>'
  }
});

它将DOM呈现为

<div class="something"> 
   my directive goes here...
   <button>some button</button>
   <a href="#">and a link</a>
</div>.

Transclude示例不适合我

1 个答案: