Угловой: шаблон с родителем и ребенком директивы

Question

У меня есть этот простой пример ...

Код:

angular 
     .module('app', []) 
     .directive('parentDirective', parentDirective) 
     .directive('childDirective', childDirective); 

    function parentDirective() { 
     return { 
     restrict: 'E', 
     scope: true, 
     //template: 'My job is {{job}}', 
     controller: function($scope) { 
      $scope.job = 'trashman'; 
      $scope.say = function(job) { 
      $scope.job = job; 
      alert($scope.job); 
      } 
     } 
     }; 
    } 

    function childDirective() { 
     return { 
     restrict: 'E', 
     link: function(scope) { 
      scope.say('shoe shine boy'); 
     } 
     }; 
    } 

Markup:

<parent-directive> 
     <child-directive></child-directive> 
    </parent-directive> 

Это работает, как ожидалось. Проблема, с которой я сталкиваюсь, - это понять, почему я не могу добавить шаблон в родительский указатель и добиться того же результата. Если вы отмените комментарий к свойству шаблона, привязка не изменится, и предупреждение больше не будет запущено. Может кто-нибудь кратко объяснить мне, что здесь происходит? Может быть, помогите составить пример? Я изучаю пример:

Answer 1

Вы можете установить свойство шаблона в родительском и внутри шаблона, используя дочернюю директиву. Он должен идеально отображать автоматически.

что-то вроде:

угловые .module ('приложение', []) .directive ('parentDirective', parentDirective) .directive ('childDirective', childDirective);

function parentDirective() { 
    return { 
    restrict: 'E', 
    scope: true, 
    template: '<div>{{job}} is seen<child-directive></child-directive></div>' 
    //template: 'My job is {{job}}', 
    controller: function($scope) { 
     $scope.job = 'trashman'; 
     $scope.say = function(job) { 
     $scope.job = job; 
     alert($scope.job); 
     } 
    } 
    }; 
} 

function childDirective() { 
    return { 
    restrict: 'E', 
    template: '<div>I will be renderred</div>', 
    link: function(scope) { 
     scope.say('shoe shine boy'); 
    } 
    }; 
} 

Теперь вы можете использовать родительскую директиву где угодно, и она также будет отображать дочернюю директиву внутри нее.

Что-то вроде:

<parent-directive></parent-directive> 

Угловая теперь будет видеть, как это, родитель директива нашел, сделать его, внутри это ребенок директива используется, визуализации HTML ребенка.

Answer 2

При использовании шаблона директивы он заменяет внутреннее содержимое директивы шаблоном и, скорее всего, из-за того, что внутренняя директива никогда не отображается.

В родительском шаблоне необходимо использовать ng-transclude, чтобы исправить директиву child html внутри шаблона родительской директивы. На вашей марке объекта определения директивы

transclude: true,

и

template: '<div> My job is {{job}} <ng-transclude></ng-transclude></div>'

Это из $compile документации

Замените содержимое элемента в директивах (по умолчанию).

Замените сам элемент директивы (если замена верна - DEPRECATED).

Оберните содержимое элемента директивы (если transclude is true).