Angular指令>动态控制器名称>插值控制器名称

Question

我需要一些有关如何将控制器定义传递给嵌套在outer指令中的inner指令的帮助。 请参阅http://plnkr.co/edit/Om2vKdvEty9euGXJ5qan了解一个（不）有效的示例。

1. 有什么方法可以使在script.js@46作为item.ctrlName传递的内容进行角度插值吗？
2. inner指令中如何使用controllerAs语法？

Answer 1

1）如果您需要内部指令具有父控制器，则可以在内部指令上使用require参数。 像这样

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设置为：true

Answer 2

我发现解决方案随着抽象而逐步降低（向上？）。 我正在动态构造整个指令配置对象，然后延迟注册它。

参见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))


  }
};
}])