Угловая директива не обрабатывается

Question

У меня есть довольно простой набор директив, один из которых является родителем, а другой - дочерним. Набор простых «списков и элементов списка». Но ребенок не используется. Вообще. Его функция связи даже не вызывается.

Вот скрипка: http://jsfiddle.net/pe2engcw/

Вы увидите 0 выскакивает в HTML, который отражает количество дочерних элементов обрабатывается, и добавляется в родительском контроллер. Должно быть 2.

Я попытался переписать функцию ссылки на функцию компиляции, которая возвращает функцию ссылки. Функция компиляции вызывается, но функция ссылки по-прежнему не работает. Я пробовал с replace: true (но, честно говоря, мне нужно, чтобы DOM был чистым, поэтому я оставлю его). Я пробовал комбинации с transclude: true (потому что эй, тебе нужно что-то попробовать). Ничто из этого не приводит к тому, что функция ссылки даже получает вызов, не говоря уже о том, что мне нужно делать.

Директива ребенка не имеет шаблона. Я знаю это. Это намеренно. Ему не нужен шаблон, потому что он ничего не собирается отображать. Соответствующие элементы - это просто данные. Директива parent будет отображать их соответствующим образом, поэтому директива parent имеет шаблон.

Я думал, что это супер-простая установка без каких-либо экзотических конструкций ... поэтому мне может что-то не хватает. Но что?

Answer 1

Без использования ng-transclude, чтобы рассказать, где обернуть существующий контент, вы эффективно уничтожите дочерние элементы с новым шаблоном. Поскольку они ушли, это объясняет, почему ваша функция ссылок не срабатывала.

После модификации заставить его работать, хотя я уверен, что вы хотите изменить шаблон

app. 
    directive("swSystemsLinks", function() { 
    return { 
     restrict: "E", 
     scope: { }, 
     replace: true, 
     transclude:true,// let angular know to transclude content 
     controller: [ "$scope", function($scope) { 
     $scope.links = [ ]; 

     this.addLink = function(name, url, icon) {    
      $scope.links.push({ 
      name: name || "", 
      url: url || "", 
      icon: icon 
      }); 
     }; 
     }], 
     /* use `ng-transclude` to point out where to wrap content into template */ 
     template: "<div>{{ links.length }}<div ng-transclude></div></div>" 
    }; 
    }); 

DEMO

Answer 2

Вы замены своих детей. Я знаю, это звучит очень драматично, но это правда. Вы можете добавить transclude: true в родительскую директиву, чтобы дети помещались в dom. Кроме того, вы добавляете ng-transclude в элемент вашего шаблона, чтобы указать, где должны быть помещены элементы-дети. Это необходимо, только если у вас есть шаблон в родительской директиве.

Я обновил скрипку: http://jsfiddle.net/pe2engcw/2/

app. 
    directive("swSystemsLinks", function() { 
    return { 
     restrict: "E", 
     scope: { },  
     transclude: true, 
     controller: [ "$scope", function($scope) { 
     $scope.links = [ ]; 

     this.addLink = function(name, url, icon) { 
      $scope.links.push({ 
      name: name || "", 
      url: url || "", 
      icon: icon 
      }); 
     }; 
     }], 
     template: "<div>{{ links.length }}<div ng-transclude></div></div>" 
    }; 
    }).