Использование ngTransclude в ngInclude

Я не могу использовать директиву ng-transclude внутри шаблона. Я получаю следующее сообщение об ошибке:Использование ngTransclude в ngInclude

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element:

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

 

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

источник

2015-08-25 puppeteer701

-1

Вы должны создать директиву, которая делает 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>

источник

2015-08-25 10:56:37 Girafa

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

When we specify the transclude: 'element' option we cannot use a template, so we cannot even specify where to put the transcluded element with the ng-transclude attribute.

Используйте 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>

Содержание включение определяется как, например:

allowing a directive to wrap arbitrary child content inside additional template HTML.

в то время как элемент означает, что включение:

the template we pass in to the directive will replace the element with ng-transclude directive.

Список литературы

источник

2016-01-05 18:04:47

ответ

Смежные вопросы