1

我有一个指令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>

它运作良好。

问题

我现在想从模板中添加一个范围变量 from mydivto ，所以我执行以下操作：myspanmydiv

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

但是，这不起作用，并且“{{mydivText}}”在被传递之前从未编译过。我认为这是由于myspan指令在此之前被mydiv初始化mydivText还没有准备好。

问题

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

1 回答 1

1

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

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

如果您的指令没有创建新的作用域，则两个指令都可以访问父作用域上定义的所有属性，因此您无需传递任何内容。

在您当前的实现中，使用{{}}s，您将不得不使用$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

于 2013-06-13T15:09:20.383 回答