Угловая директива> Имя динамического контроллера> Имя контроллера интерполяции

Question

Мне нужна помощь в том, как передавать определения контроллеров в директиву inner, вложенную в директиву outer. Пожалуйста, см. http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan для (не) рабочего примера.

1. Есть ли способ сделать угловую Interpolate то, что передается по script.js@46 в item.ctrlName?
2. Как использовать controllerAs синтаксис в inner директива?

Answer 1

I нашел решение спуститься вниз (вверх?) с абстракцией. Я динамически строю весь объект конфигурации директивы, а затем ленивую регистрацию.

См http://plnkr.co/edit/pMsgop6u51zPLqkfWaWT

angular.module('app', ['moduleLazyLoader']) 

.controller('mainCtrl', ['$log', function ($log) { 
this.list = [ 
    { 
    name: 'asd', 
    ctrl: [ 
     'ItemAsdCtrl', 
     function() { 
     $log.debug('ItemAsdCtrl'); 
     } 
    ] 
    }, 
    { 
    name: 'xyz', 
    ctrl: [ 
     'ItemXyzCtrl', 
     function() { 
     $log.debug('ItemXyzCtrl'); 
     } 
    ] 
    } 
]; 
}]) 

.directive('outer', ['factoryLazyLoader', '$log', '$compile', function (factoryLazyLoader, $log, $compile) { 

function controller() {} 

return { 
    restrict: 'E', 
    controller: controller, 
    controllerAs: 'outer', 
    bindToController: true, 
    scope: { 
    list: '=list' 
    }, 
    link: function (scope, element, attributes) { 
    var directives = []; 

    scope.outer.list = scope.outer.list.map(function (ele, idx) { 

     var directiveSuffix = ele.ctrl[0]; 

     directiveSuffix[0].toUpperCase(); 

     var directiveName = 'item' + directiveSuffix, 
     directiveAttrName = directiveName.split(/(?=[A-Z])/).join("-").toLowerCase(); 

     directives.push(directiveAttrName); 

     factoryLazyLoader.registerDirective([ 
     directiveName, 
     function() { 
      return { 
      restrict: 'E', 
      replace: true, 
      controller: ele.ctrl[1], 
      controllerAs: ele.ctrl[0], 
      bindToController: true, 
      template: '<div>{{' + ele.ctrl[0] + ' | json}}</div>', 
      scope: { 
       item: '=item' 
      } 
      } 
     } 
     ]) 

     return ele; 
    }); 

    var tpl = '<div>'; 

    angular.forEach(directives, function (val, idx) { 
     tpl += '<' + val +' item="outer.list[' + idx + ']">' + '</' + val + '>'; 
    }); 

    tpl += '</div>' 

    // debugger; 

    element.replaceWith($compile(tpl)(scope)) 


    } 
}; 
}]) 

Answer 2

1) если вам нужна внутренняя директива, чтобы иметь родительский контроллер, вы можете использовать требуемые параметры во внутренней директиве. Нечто подобное

angular.module('docsTabsExample', []) 
    .directive('outer', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     templateUrl: '...', // or template 
     controllerAs: 'outer', 
     bindToController: true, // This bind the scope with the controller object 
     controller: function(scope, element, attrs) { 
     } 
    } 
    }) 
    .directive('inner', function() { 
    return { 
     require: '^outer', 
     restrict: 'E', 
     transclude: true, 
     scope: { 
     title: '@' 
     }, 
     controllerAs: 'inner', 
     bindToController: true, // This bind the scope with the controller object 
     templateUrl: '...', // or template 
     controller: function(scope, element, attrs, tabsCtrl) { 
     // tabsCtrl and all the methods on the outer directive 
     }, 
    }; 
}); 

2) Вы установили контроллер: контроллер и контроллер является пустой функцией, но вы можете установить там функцию, как я делал раньше и убедиться поставить bindToController: правда