javascript - AngularJS - 将隔离指令范围与 ngRepeat 一起使用

Question

我对 Angular 相当陌生，并且正在尝试将我自己的“可选择”指令添加到列表中，以便可以选择或不选择列表中的项目。我一直在努力保持它的模块化，因此我宁愿将其存储在“selectable”指令的范围内，而不是将信息存储在列表项中。

我的 HTML:

<ul ng-controller="mainCtl">
<li inner="{item: item}" ng-repeat="item in items" ng-class="{sel: inner.selected}">
    {{ item.Name }}
</li>
</ul>

我的“内在”指令:

    directive('inner', [
    function() {
        return {
            restrict: 'A',
            scope: {
                inner: '='
            },
            link: function(scope, element, attr) {
                scope.inner.selected = false;
                element.bind('click', function(e) {
                    scope.inner.selected = !scope.inner.selected;
                });
            }
        };
    }]);

如您所见，我打算让每一行都有一个可切换属性，然后 ngClass 使用该属性来设置元素的类，并且不会针对“item”对象存储。

如果我选择一个示例列表条目，并查看范围内的内容，我根本看不到“内部”出现，因此 ng-class 无法访问它是有道理的。很可能我试图以完全错误的方式来解决这个问题，因为我还没有完全习惯“有 Angular ”的做事方式。任何有关如何解决此问题的帮助，或者为我指明正确的文献方向都会有所帮助。

JSFiddle 示例: http://jsfiddle.net/2pdvs/

谢谢

Answer 1

指令很棒，但是在这种情况下您真的需要一个指令吗？你可以这样做:

<ul ng-controller="mainCtl">
    <li ng-click="selected=!selected" ng-repeat="item in items" ng-class="{sel: selected}">
        {{ item.Name }}
    </li>
</ul>

ng-repeat 为每个项目创建一个新范围，因此每个列表项的 selected 变量将彼此独立地存在。