Angularjs 使用 ng-repeat 隔离作用域指令

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 元素就具有这个隔离范围。因此，当数据绑定发生时，来自 ng-repeat 的 inboxuser 不再在范围内（它在父范围内）。

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

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

   template: '{{selected}}',

另外，顺便说一下，您的<p> 上缺少报价。所以这可能对你更有效（注意我还从<p> 中删除了{{inboxuser}}，假设你将使用模板来显示它）：

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

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

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

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