Javascript AngularJS-使用隔离指令作用域和ngRepeat

我是Angular的新手，正在尝试将我自己的“可选”指令添加到列表中，以便列表中的项目可以被选择或不被选择。我一直在尝试将其模块化，因此与其根据列表项存储信息，不如将其存储在“可选”指令的范围内

我的HTML：

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

如您所见，我打算让每一行都有一个togglable属性，然后ngClass使用该属性设置元素的类，而不是针对“item”对象存储

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

JSFIDLE示例：

---

谢谢

您的指令都有自己的范围。您在其作用域上正确设置bool，但尝试使用

ng class

从控制器作用域引用它

有很多方法可以做到这一点，如果您想将其保持在指令范围内，您可以简单地执行以下操作：

angular.module('test', []).
    controller('mainCtl', ['$scope',
        function($scope) {
            $scope.items = [{Name: 'obj1'}, {Name: 'obj2'}];
            console.log($scope);
        }]).
    directive('inner', [
        function () {
            return {
                restrict: 'A',
                scope: {
                    inner: '='
                },
                link: function (scope, element, attr) {
                    var el = angular.element(element);
                    el.on('click', function (a, b, c) {
                        if (el.hasClass('sel')) {
                            el.removeClass('sel');
                        } else {
                            el.addClass('sel');
                        }
                    });
                }
            };
        }]);

工作小提琴：

---

---

否则我会使用@Strille answer

这是一把供您使用的小提琴

与Asok的答案不同，我仍然设法保持了ng类。我认为您的问题在于您没有传递正确的变量，并且在ng类内部使用了一个变量

internal

，它超出了它的范围（指令的隔离范围）

编辑

这是一种不使用指令的替代方法，它仍然非常模糊，所以我只给出伪代码。我们的想法是创建一种工厂，它接受阵列并将某种选择逻辑附加到阵列上

app.service('selection', [function(){
    function selection(array){
       //constructor function that attaches or creates the selection logic for the array
    }


    this.create = function(input){
        return new selection(input);
    }
}]);

app.controller('myCtrl', ['selection', '$scope', function(selection, $scope){
    $scope.array = [{...},{...}];


    //Creates a selection from the array
    $scope.selection=selection.create($scope.array);
}])

其思想是服务中的

选择

函数将获取阵列并将选择逻辑附加到阵列上（即，为每个对象附加一个

selected=false

属性，创建一个允许切换选择一个对象的函数，一个取消选择所有项目的函数，或确定是否至少选择了数组中的某些元素）

---

虽然这看起来可能要复杂得多（事实上是这样），但我相信它的优点是，只要你想从列表中进行选择，它就可以很容易地重用。

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

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

{{item.Name}

---

ng repeat为每个项目创建了一个新的作用域，因此所选的

变量将独立地存在于每个列表项目中。
请注意，在大多数情况下，手动调用被认为是不好的做法，很少需要，通常会有更优雅的解决方案。是的，但是如果我们使用jQuery lite库（'element.bind（）'）），angular不会像在许多其他情况下一样自然地调用$scope.$apply（）。或者，我可以像您的示例中那样使用“ng click”创建相同的功能，而不必使用$apply（）@Strille的回答肯定更简单，我同意使用指令是过分的。但是，希望您能更好地理解指令作用域是如何工作的。在我的项目中，我一直在考虑创建某种选择服务/工厂，为任何数组创建选择。为了与Angular保持一致，它应该是可重用的，并且独立于界面。如果我有什么有趣的东西，我会分享。这正是我看到他试图做的事情时的想法。
<ul ng-controller="mainCtl">
    <li ng-click="selected=!selected" ng-repeat="item in items" ng-class="{sel: selected}">
        {{ item.Name }}
    </li>
</ul>