Question

我有一个复合列表指令 - 即 - 一个列表项，可以自己列出。
parent指令定义控制器：

.directive('parent', function() {
    controller: function($scope) {
    },
    link: function (scope, element, attrs) {
    }
})

列表（项目）需要父控制器，它本身可以正常工作（为什么不应该......）：

.directive('list', function() {
     require: '^parent',
     link: function (scope, element, attrs, parentCtrl) {
     }
  })

具体项目也是如此，这也很好：

.directive('item', function() {
    require: '^parent',
    link: function (scope, element, attrs, parentCtrl) {
    }
})

项目可以是复合项目，在这种情况下，它自己创建“列表”。此组合由 $ compile （链接）函数内的列表项完成：

link: function (scope, element, attrs, parentCtrl) {
      ...
      $compile("<list></list>")(scope)
      ... 
}

引发异常：
指令'list'所需的控制器'parent'无法找到！。
原因很明显 - $ compile函数没有提供控制器，因此无法解析'parent'的要求。
所以我尝试手动提供控制器：

$compile("<list></list>")(scope, null, {'parent': parentCtrl});

哪个不会引发异常，但在需要时仍然不提供此控制器。

任何想法如何使$ compile函数接受一个应该评估的外部控制器？

Answer 1

我刚刚遇到了类似的问题，解决方案似乎是首先将元素添加到父级，然后编译它。

.directive('item', function($compile) {
  return {
    template:'<li><a ng-click="addSubList()">Create Another List</a></li>',
    require: '^parent',
    replace: true,
    link: function(scope, element, attrs, parentCtrl) {

      scope.addSubList = function() {
        var sublist = angular.element('<ul list>');
        element.find('a').append(sublist);
        $compile(sublist)(scope);
      };

    }
  };
});

请参阅此Plunker：http://plnkr.co/edit/dASASrFbtXSMCRZKRAj5?p=preview

Answer 2

供将来参考，以下是解决方案：

在$ compile函数中，所需的控制器可以作为被转换的控制器传递：

$compile(template)(scope, undefined, {transcludeControllers: injectedCtrl})

其中“injectCtrl”是列出指令所期望的控制器的对象，例如，如果你require: '^dad'，则transcludeControllers看起来像这样：

 transcludeControllers: {
        dad: { //name of controller in 'require' statement
          instance: vm //instance of controller
        }
      }

请参阅此示例：https://jsfiddle.net/qq4gqn6t/11/

这就是它！

Answer 3

$compile(angular.element("< list>< /list >"))(scope)

使用所需控制器进行Angular $编译

3 个答案: