Question

我有一个指令mydiv，它在其中嵌入了另一个指令myspan。所以我的index.html看起来像：

<mydiv></mydiv>

，mydiv的模板如下：

<div>
    <myspan><myspan>
</div>

和myspan只是：

<span>asdf</span>

现在我想动态地将变量传递给myspan指令，所以我在mydiv中做了类似的事情：

<div>
    <myspan data-text="hello"><myspan>
</div>

并使用指令链接函数将其添加到myspan控制器作用域（它基本上采用所有“data- *”属性并将其设置在作用域上）：

link: function(scope, elem, attrs){
    for(var attr in attrs) {
        scope[attr] = attrs[attr];
    }
}

最后，myspan模板如下所示：

<span>{{text}}</span>

并且效果很好。

问题

我现在想要从mydiv模板中添加myspan到mydiv的范围变量，所以我会执行以下操作：

<div>
    <myspan data-text="hello" data-scopevar="{{mydivText}}"><myspan>
</div>

但是，这不起作用，“{{mydivText}}”在传递之前永远不会被编译。我认为这是因为myspan指令在mydiv之前被初始化，因此mydivText还没有准备好。

问题

首先，这是将变量传递给嵌入式指令的正确方法吗？
其次，如何将父范围变量传递给其子节点？注意，我不想从孩子那里读取$ scope。$ parent等，而是直接以声明方式传递。

Answer 1

首先，这是将变量传递给嵌入式指令的正确方法吗？

这一切都取决于您的mydiv和myspan指令指定的范围类型。他们是使用父范围，创建新的子范围还是使用隔离范围？

如果你的指令没有创建新的作用域，那么这两个指令都可以访问父作用域中定义的所有属性，因此你不需要传递任何东西。

根据您当前的实施，使用{{}}，您必须使用$observe来获取插值：

link: function(scope, elem, attrs) {
    for(var attr in attrs) {
        if(attrs !== 'scopevar') {
            scope[attr] = attrs[attr];
        }
    }
    attrs.$observe('scopevar', function(value) {
        scope['scopevar'] = value;
    })
}

fiddle

将变量传递给嵌入式指令

1 个答案: