Angular js Zagnieżdżanie niestandardowych dyrektyw

Question

Chcę użyć czegoś takiego jak zagnieżdżanie z niestandardowymi dyrektywami w kanciastym js. Czy ktoś mógłby mi wyjaśnić proste rozwiązanie?

przykład kodu jest poniżej nie działa dla mnie:

<outer> 
    <inner></inner> 
</outer> 

JS

var app = angular.module('app',[]); 
app.directive('outer',function(){ 
    return{ 
     restrict:'E', 
     template:'<div><h1>i am a outer</h1></div>', 
     compile : function(elem,attr){ 
      return function(scope,elem,att,outercontrol){ 
       outercontrol.addItem(1); 
      } 
     }, 
     controller : function($scope){ 
      this.addItem = function(val){ 
       console.log(val); 
      } 
     } 
    } 
}); 

app.directive('inner',function(){ 
    return{ 
     require : 'outer', 
     template : '<div><h1>i am a inner</h1></div>', 
     link:function(scope,elem,attr){ 

     } 
    } 
}); 

Answer 1

Jeśli chcesz proste rozwiązanie, sprawdź this plunkr.

var app = angular.module('app',[]); 
 

 
app.directive('outer', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div style="border-style:solid"><h1>hey</h1><inner></inner></div>', 
 
    } 
 
}); 
 

 
app.directive('inner', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div style="border-style:solid"><h1>i am an inner</h1></div>', 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
<div ng-app="app"> 
 
    <outer></outer> 
 
</div>

Problem polega na tym, że niszczysz znacznik za pomocą atrybutu szablonu dyrektywy. Linia ta:

template:'<div><h1>i am a outer</h1></div>', 

Czy to.

Answer 2

Najpierw dodaj restrict:'E' do wewnętrznego kontrolera, aby był dostępny jako element.

Następnie zmień require : 'outer' na require : '^outer',, aby umożliwić wyszukiwanie tej dyrektywy u rodziców.

Wtedy trzeba użyć transclude włączyć treść <outer> do oglądania, w następujących etapach:

1. dodać transclude = true do zewnętrznej dyrektywy.
2. Zdefiniuj miejsce, w którym chcesz przeglądać dane wewnętrzne. (Sądzę, że potrzebujesz go, aby pojawił się po łańcuchu "jestem zewnętrzny", abyś mógł zmodyfikować szablon zewnętrznego, tak aby był taki jak ten template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>').

Następnie nie trzeba w ogóle do parametru kompilacji. Ponieważ ta zmienna, która wywołała sterowanie zewnętrzne, nie zostanie wywołana na zewnętrznej dyrektywie, ale na wewnętrznej dyrektywie, więc nie ma potrzeby kompilacji w ogóle dla zewnętrznej dyrektywy, a wewnętrzna funkcja łącza będzie zmodyfikowana, aby wyglądać tak:

link: function(scope, elem, attr, outercontrol){ 
    outercontrol.addItem(1); 
} 

po całej tej modyfikacji końcowy kod będzie tak:

HTML:

<outer> 
<inner></inner> 
</outer> 

js:

var app = angular.module("exampleApp",[]); 
    app.directive('outer', function(){ 
     return{ 
      transclude:true, 
      restrict:'E', 
      template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>', 
      controller : function($scope){ 
       this.addItem = function(val){ 
        console.log(val); 
       } 
      } 
     } 
    }); 

    app.directive('inner',function(){ 
     return{ 
      restrict:'E', 
      require : '^outer', 
      template : '<div><h1>i am a inner</h1></div>', 
      link:function(scope,elem,attr,outercontrol){ 
       outercontrol.addItem(1); 
      } 
     } 
    });