动态指令控制器使用name属性 [英] Dynamic directive controller using name property

问题描述

我正在尝试使用动态控制器实现指令，以便我可以根据某些条件绑定控制器，就像Todd Motto已经显示它一样这里

I'm trying to implement directive with dynamic controller so that I can bind controller based on some condition just like Todd Motto has shown it here

一切正常，期望我无法发送对象属性作为指令的名称，如

Everything works fine expect that I can't send object property as a name to the directive like,

<directive-with-dynamic-controller ctrl="someObj.prop"></directive-with-dynamic-controller>

我甚至试过这个，但无济于事：

I've even tried this, but to no avail:

<directive-with-dynamic-controller ctrl="{{someObj.prop}}"></directive-with-dynamic-controller>

它出现如下错误：

参数不是函数，未定义

Argument is not a function, got undefined

我有什么想法可以解决这个问题？还是其他任何方式？
谢谢！

Any ideas how I can solve this? Or any other way? Thanks!

推荐答案

我有什么想法可以解决这个问题？还是其他任何方式？谢谢！

Any ideas how I can solve this? Or any other way? Thanks!

问题在于执行顺序。在上面提到的文章中遗漏的一点是，在设置动态控制器的情况下，无法传递表达式（对动态来说太多了）。

The problem is in the order of execution. Something that was left out in the mentioned article is the fact that you cannot pass an expression in the case of setting a "dynamic" controller (so much for dynamic).

如果我们查看指令 compile 步骤的符号，您会注意到没有访问权限当前 $ scope 。

If we look at the notation of a directives compile step, you would notice that there is no access to the current $scope.

这是因为DOM编译和控制器初始化发生在之前角度解析器启动并评估您的表达式。

This is because DOM compilation and controller initialisation happens before the angular parser kicks in and evaluates your expression(s).

因此，无法将$ scope表达式传递到 ctrl 属性中，因为它在这个时间点只是一个常规的DOM属性。实质上，您将原始字符串传递给 ctrl 属性。

As such, you cannot pass a $scope expression into the ctrl attribute, as it is simply a regular DOM attribute at this point in time. In essence, you are passing the raw string into the ctrl attribute.

<my-custom-dir ctrl="foo.bar"></my-custom-dir>

// Error: "foo.bar" is not a controller // is not a function // $minErrObscureStuffThatDoesnHelpYou.

我一直试图想出一个光滑的方法来获得延迟指令编译现在运行了一段时间，但无济于事......

I've been trying to figure out a slick way to get deferred directive compilation running for some time now, but to no avail...

解决此问题的一种可能方式（ ymmv ）：

One possible way of getting around this problem (ymmv):

.directive('...', function ($controller) {
  controller: function ($scope, $element, $attrs) {
    $attrs.$observe('ctrl', function (n, o) {
      return $controller(n, {
        $scope:   $scope,
        $element: $element,
        $attrs:   $attrs
      });
    });
  }
});

实际上，你替换一个预先初始化的控制器（什么都不做） ）控制器与您通过 attrs.ctrl 属性传递的名称相匹配。但是，这将执行后编译 - 所以我不会认真推荐它。

Effectively, you would replace a pre-initialised controller (that does nothing) with the controller matched by the name you passed through your attrs.ctrl attribute. However, this would execute post-compilation - so I wouldn't seriously recommend it.

jsfiddle显示执行顺序

tl; dr 目前还没有基于$ scope表达式为指令定义控制器的灵巧方法。它必须是一个原始字符串，因为编译不是基于每个组件的范围，而是以全局执行顺序更多。

tl;dr There is currently no slick way to define a controller for a directive, based on a $scope expression. It has to be a raw string because compilation isn't scoped on a per-component basis, but more so in a 'global' order of execution.

DOM编译>控制器初始化>范围链接小提琴

这篇关于动态指令控制器使用name属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！