javascript — угловые js вложенные пользовательские директивы

Угловые js Вложенные пользовательские директивы

Сначала добавьте restrict:'E' к внутреннему контроллеру, чтобы сделать его доступным как элемент.

Затем измените require : 'outer' на require : '^outer', чтобы включить поиск этой директивы у родителей.

Затем вам нужно использовать transclude, чтобы разрешить просмотр содержимого {amp}lt;outer{amp}gt; , выполнив следующие шаги:

  1. добавить transclude = true к внешней директиве.
  2. определить, где вы хотите, чтобы внутренние данные были просмотрены. (Полагаю, вам нужно, чтобы он появлялся после строки «i am external», чтобы вы могли изменить шаблон внешнего так, чтобы он был похож на этот template:'{amp}lt;div{amp}gt;{amp}lt;h1{amp}gt;i am a outer{amp}lt;/h1{amp}gt;{amp}lt;div ng-transclude{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/div{amp}gt;' ) .

Тогда вам вообще не нужен параметр компиляции. Так как эта переменная, которая вызвала externalcontrol, будет вызываться не во внешней директиве, а во внутренней директиве, поэтому для внешней директивы компиляция вообще не нужна, и функция внутренней ссылки будет изменена так, чтобы она была такой:

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

после всего этого изменения окончательный код будет выглядеть следующим образом:

HTML :

 {amp}lt;outer{amp}gt; {amp}lt;inner{amp}gt;{amp}lt;/inner{amp}gt; {amp}lt;/outer{amp}gt; 

JS :

 var app = angular.module("exampleApp",[]); app.directive('outer', function(){ return{ transclude:true, restrict:'E', template:'{amp}lt;div{amp}gt;{amp}lt;h1{amp}gt;i am a outer{amp}lt;/h1{amp}gt;{amp}lt;div ng-transclude{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/div{amp}gt;', controller : function($scope){ this.addItem = function(val){ console.log(val); } } } }); app.directive('inner',function(){ return{ restrict:'E', require : '^outer', template : '{amp}lt;div{amp}gt;{amp}lt;h1{amp}gt;i am a inner{amp}lt;/h1{amp}gt;{amp}lt;/div{amp}gt;', link:function(scope,elem,attr,outercontrol){ outercontrol.addItem(1); } } }); 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector