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


  }
};
}])