1

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

.html 文件

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

指令.js

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

}
 });
4

2 回答 2

3

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

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

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

   template: '{{selected}}',

另外，顺便说一句，您的<p>. 所以这可能对你更有效（注意我也{{inboxuser}}从<p>假设你将使用模板来显示它中删除）：

  <p inboxuser-select selected="{{inboxuser}}"></p>
于 2013-11-08T05:53:03.917 回答
0

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

但是，我修复了您的示例只是为了解释事情是如何工作的。

你可以在这里看到它。

所以......当你写：

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');

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

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

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

于 2013-11-08T16:25:09.337 回答