Angularjs - Использование директивы для создания экземпляров других директив?

Итак, скажем, в моем HTML у меня есть что-то вроде этого:

<tabcontent></tabcontent>

Тогда javascript для этой директивы таков:

tabsApp.directive('tabcontent', function(){

  var myObj = {
    priority:0,
    template:'<div></div>',
    replace: true,
    controller: 'TabCtrl',
    transclude: false,
    restrict: 'E',
    scope: false,
    compile: function (element, attrs){
      return function (parentScope, instanceEle){
        parentScope.$watch('type', function(val) {
          element.html('<div '+val+'></div>');
        });
      }
      $compile(parentScope);
    },
    link: function postLink(scope, iElement, iAttrs){}
  };
  return myObj;

});

HTML обрабатывается правильно, а значение типа найдено в контроллере JS.

so <tabcontent></tabcontent> is replaced with <div recipe></div> for example..

(эта часть выполняется правильно)

Итак, у меня также есть директива для рецепта:

tabsApp.directive('recipe', function(){

  var myObj = {
    priority:0,
    template:'<div>TESTING</div>',
    replace: true,
    controller: 'TabCtrl',
    transclude: false,
    restrict: 'E',
    scope: false,
    compile: function (element, attrs){
      return {
        pre: function preLink(scope, iElement, iAttrs, controller){},
        post: function postLink(scope, iElement, iAttrs, controller){}
      }
    },
    link: function postLink(scope, iElement, iAttrs){}
  };
  return myObj;

});

Это, очевидно, довольно просто и просто для тестирования. Но директива рецепта не обрабатывается...

Что происходит здесь?

Ответ 1

Вам нужно изменить 2 вещи:

  • Директива recipe не должна ограничиваться E (элементом). Если вы создаете директиву как <div recipe></div>, вы должны хотя бы добавить A (атрибут) в свойство restrict в конфигурации директивы:

    app.directive('recipe', function() {
       return {
          restrict: 'E',
          ...
    
  • Вам нужно скомпилировать HTML-содержимое директивы tabcontent после "watch":

    app.directive('tabcontent', function($compile){
       return {    
       ...    
       link: function (scope, iElement, iAttrs) {
                scope.$watch('type', function(val) {
                   iElement.html('<div '+val+'></div>');           
                   $compile(iElement.contents())(scope);         
                 });
             }
       ...        
    

jsFiddle: http://jsfiddle.net/bmleite/n2BXp/