Question

我正在尝试使用ng-repeat项目的指令，每个项目都有一个隔离范围，但它不起作用。我循环遍历每个项目并使用inboxuser-select指令将其着色为红色。但是，当我打开指令时，它不显示任何我的范围值。这是什么问题？感谢

html文件

   <li class="inbox-chatter"  data-ng-    
        repeat="inboxuser in inboxusers">
        <p inboxuser-select selected={{inboxuser}}">{{inboxuser}}</p>
       </li>

directive.js

.directive('inboxuserSelect', function() {
return {
    restrict: 'A',
    scope: {
        selected: "@"
    },
    link: function(scope, element, attrs) {
   scope.selected.css('color','red');
    }

}
 });

Answer 1

问题是，一旦在指令上设置了隔离范围，那么整个DOM元素就具有隔离范围。因此，当发生数据绑定时，inboxuser中的ng-repeat不再在范围内（它在父作用域上）。

一个选项是将scope设置为true而不是使用隔离范围，这样您就可以从父范围继承所有内容。

或者您可以使用隔离范围，但将inboxuser传递给指令并使用模板显示它。由于您已经通过inboxuser将selected传递到指令的范围，因此很容易将其添加到您的指令中：

   template: '{{selected}}',

另外，顺便说一句，您错过了<p>上的引用。因此，这可能会对您有所帮助（请注意，我也从{{inboxuser}}中删除了<p>，假设您将使用模板来显示该内容：

  <p inboxuser-select selected="{{inboxuser}}"></p>

Answer 2

说实话，我不明白你真正需要做什么，但我觉得这个设计不会让你到那里。

但是，我修复了你的例子只是为了解释事情是如何运作的。

你可以看到它here。

所以......写的时候：

scope: {
    selected: "@"
}

您实际上是在说我的隔离范围将包含一个名为selected的属性，该属性的类型为string，并且将包含{{inboxuser}}评估的任何内容。不仅如此，每当外部范围inboxuser发生变化时，selected也会在内部隔离范围内发生变化。这就是'@'绑定的工作原理。

无论你嵌套在<p inboxuser-select selected="{{inboxuser}}"></p>中的是什么，都绑定到那个没有inboxuser属性的孤立范围。所以，它必须改为：

<p inboxuser-select selected="{{inboxuser}}">{{selected}}</p>

最后，scope.selected.css('color','red');应更改为：

element.css('color','red');

link函数中的element参数是应用指令实例的DOM元素。 scope.selected只是一个字符串。

我建议您重新设计整体设计。如果您需要帮助，请随时提出。

如果它对你有所帮助，你可以使用AngScope，这是我写的一个小小的萤火虫扩张。这只是检查firebug的DOM检查器中与DOM元素相关联的$scope个实例的快速方法。

Angularjs使用ng-repeat隔离范围指令

2 个答案: