18

我有一个复合列表指令 - 即 - 一个可以是列表本身的列表项。
父指令定义控制器：

.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 (ing) 链接函数中的一个列表项来完成的：

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

引发异常：
找不到指令“列表”所需的控制器“父级”！

原因很明显 - $compile 函数没有提供控制器，因此无法解决“父”的要求。
所以我尝试手动提供控制器：

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

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

知道如何使 $compile 函数接受也应该评估的外部控制器吗？

4

3 回答 3

23

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

.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

于 2014-03-22T21:33:32.197 回答
9

为了将来参考，这里是解决方案：

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

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

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

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

看这个例子：https ://jsfiddle.net/qq4gqn6t/11/


就是这样！

于 2015-02-10T16:32:15.507 回答
-3 
$compile(angular.element("< list>< /list >"))(scope)
于 2016-04-14T09:06:35.217 回答