在 ngInclude 中使用 ngTransclude答案

【问题标题】：use of ngTransclude in ngInclude在 ngInclude 中使用 ngTransclude
【发布时间】：2015-08-25 10:55:21
【问题描述】：

我不能在模板内使用ng-transclude 指令。我收到以下错误：

错误：[ngTransclude:orphan] 在模板中非法使用 ngTransclude 指令！没有找到需要嵌入的父指令。元素：

<script type="text/ng-template" id="item.html">
<div ng-transclude>
</div>
</script>


<div ng-include="'item.html'"></div>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-ng-include angularjs-ng-transclude

【解决方案1】：

ng-include 使用element transclusion 而不是content transclusion，所以这行不通。

describe('element transclusion', function() {

  it('should support basic element transclusion', function() {
    module(function() {
      directive('trans', function(log) {
        return {
          transclude: 'element',
          priority: 2,
          controller: function($transclude) { this.$transclude = $transclude; },
          compile: function(element, attrs, template) {
            log('compile: ' + angular.mock.dump(element));
            return function(scope, element, attrs, ctrl) {
              log('link');
              var cursor = element;
              template(scope.$new(), function(clone) {cursor.after(cursor = clone);});
              ctrl.$transclude(function(clone) {cursor.after(clone);});
            };
          }
        };
      });
    });
    inject(function(log, $rootScope, $compile) {
      element = $compile('<div><div high-log trans="text" log>{{$parent.$id}}-{{$id}};</div></div>')($rootScope);
      $rootScope.$apply();
      expect(log).toEqual('compile: <!-- trans: text -->; link; LOG; LOG; HIGH');
      expect(element.text()).toEqual('1-2;1-3;');
    });
  });

当我们指定 transclude: 'element' 选项时，我们不能使用模板，因此我们甚至无法使用 ng-transclude 属性指定放置被转换元素的位置。

使用decorator 代替content transclusion：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="transcludeExample">
  <script type="text/ng-template" id="foo">
  </script>
  
  <script>
    function delegator($delegate)
     {
     /* Override transclude configuration */ 
     $delegate[0].transclude = true;
     
     return $delegate;
     }


    function provider($provide)
     {
     /* Deocrate ng-include with a proxy function */
     $provide.decorator('ngIncludeDirective', ["$delegate", delegator]);
     }

    /* Inject the provider and the delegator methods with services */
    provider['$inject'] = ['$provide'];
    delegator['$inject'] = ['$delegate'];

    /* Inject the module with the new provider */
    angular.module('transcludeExample', []);
    angular.module("transcludeExample").config(["$provide",provider]);
  </script>
  
<div>Non-transcluded ID: {{$id}}</div><div ng-include src="'foo'" data-foo="{{$id}}">Transcluded ID: {{$id}}<ng-transclude></div></div>
</body>

内容嵌入是这样定义的：

允许指令将任意子内容包装在附加模板 HTML 中。

而元素嵌入意味着：

我们传入指令的模板将用ng-transclude 指令替换元素。

参考文献

【讨论】：

【解决方案2】：

您应该创建一个呈现 item.html 的指令。在指令定义对象中添加transclude: true属性。

angular.module('MyModule')
  .directive('item', function () {
    return {
      restrict: 'EA',
      scope:{},
      transclude: true,
      templateUrl: 'item.html'
    };
  });



...


<item>
  <!-- here goes your transcluded content -->
</item>

【讨论】：