带有所需控制器的 Angular $compile [英] Angular $compile with required controller

问题描述

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

.directive('parent', function() {控制器:功能($范围){},链接:函数(范围、元素、属性){}})

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

.directive('list', function() {要求:'^父母'，链接:函数(范围、元素、属性、父控件){}})

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

.directive('item', function() {要求:'^父母'，链接:函数(范围、元素、属性、父控件){}})

一个项目可能是一个组合，在这种情况下它自己创建一个列表".这个组合是通过$compile(ing)链接函数内的一个列表项完成的:

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

抛出异常:
无法找到指令list"所需的控制器parent"！

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

$compile("")(scope, null, {'parent': parentCtrl});

它不会抛出异常，但在需要时仍不提供此控制器.

知道如何让 $compile 函数接受一个也应该被评估的外部控制器吗?

解决方案

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

在 $compile 函数上，所需的控制器可以作为嵌入的控制器传递:

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

其中injectedCtrl"是列出指令期望的控制器的对象，例如，如果您require: '^dad'，则transcludeControllers看起来像这样:

 transcludeControllers: {爸爸:{//'require'语句中的控制器名称instance: vm//控制器的实例}}

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

就是这样！

I have a composite list directive - that is - a list item that can be a list himself.
The parent directive defines the controller:

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

The list (of items) requires the parent controller which by itself works fine (why shouldn't it..):

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

The same goes as well for the concrete item, which is also fine:

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

An item may be a composite in which case it creates a "list" himself. This composition is done by $compile (ing) a list item inside the link function:

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

Which throws an exception:
Controller 'parent', required by directive 'list', can't be found!

The reason for this is obvious - the $compile function didn't provide the controller and therefore the requirement of 'parent' cannot be resolved.
And so I've tried providing the controller manually:

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

Which doesn't throws an exception but still doesn't provide this controller when needed.

Any idea how to make the $compile function accept an external controllers which should be evaluated as well?

解决方案

For future reference, here is the solution:

On the $compile function the required controller can be passed as the transcluded controller:

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

Where the "injectedCtrl" is the object which lists controllers the directive expects, for example if you require: '^dad', then transcludeControllers look like this:

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

See this example: https://jsfiddle.net/qq4gqn6t/11/

Thats it!

这篇关于带有所需控制器的 Angular $compile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！