Zapobiegaj `ng-include` przed tworzeniem izolowanego zakresu. AngularJS

Question

Używam dyrektywy ng-include src w wielu miejscach w moim kodzie HTML. Każdy ng-include tworzy izolowany zakres dla siebie, który najwyraźniej sprawia mi wiele problemów.

Na przykład.

<div ng-controller="parent"> 
    <div ng-include src="'id1'"> 
    </div> 
    <div ng-include src="'id2'"> 
    </div> 
    <div ng-include src="'id2'"> 
    </div> 
</div> 

W powyższym html powstają 4 zakresy. 1 u rodzica, gdzie controller jest zdefiniowany, a 3 są domyślnie tworzone na każdym ng-include src.

Czy można w ogóle uniemożliwić ng-include utworzenie izolowanego zakresu dla siebie? Jeśli nie jest to możliwe, czy istnieje obejście tego problemu?

Answer 1

Należy utworzyć własną dyrektywę, która może załadować określony szablon z izolowanym zakresem.

HTML

<div ng-controller="parent"> 
    <div my-directive template-path="id1"> 
    </div> 
    <div my-directive template-path="id2"> 
    </div> 
    <div my-directive template-path="id2"> 
    </div> 
</div> 

dyrektywa

.directive('myDirective', function() { 
    return { 
     restrict: 'AE', 
     templateUrl: function(ele, attrs) { 
      return attrs.templatePath; 
     } 
    }; 
}); 

Working Plunkr