Question

我的页面上有几个任意数量的菜单项。简化它们看起来像这样。

<a href="" class="menu-item" ng-click="...">...</a>

我想在一个被点击的项目中添加一个特定的类，以使其状态与其他项目相比发生变化。

我知道我应该做这种模式：

<a href=""
   class="menu-item"
   ng-class="{ active: clicked }"
   ng-click="clicked = true">
...</a>

但问题是我不能使用单个变量，因为我有任意数量的项目。我应该使用X个变量或使用数组。但无论如何，除非我手动输入这些指数，否则我怎么知道哪个项目与每个变量/数组索引相关？

我缺少什么

我缺少可以在ng-click中使用的元素引用，因此我可以在元素本身上添加特定的类。但是，即使我不使用任何操作UI的$scope函数，这也会绑定$scope和UI。我会在视图中完成所有工作......

我该怎么做？

Answer 1

解决此问题的指令：

app.directive("markable", function() {
    return {
        scope: {}, // create isolated scope, so as not to touch the parent
        template: "<a href='#' ng-click='mark()' ng-class='{ active: marked }'><span ng-transclude></span></a>",
        replace: true,
        transclude: true,
        link: function(scope, elem, attrs) {
            scope.marked = false;
            scope.mark = function() {
                scope.marked = true;
            };
        }
    };
});

将其用作：

<a markable>Mark me</a>

相关小提琴：http://jsfiddle.net/9HP99/

指令的优点是它非常易于使用。

与DOM-manupulating指令相同，通过Angular的jQuery-ish接口：

app.directive("markable", function() {
    return {
        link: function(scope, elem, attrs) {
            elem.on("click", function() {
                elem.addClass("active");
            });
        }
    };
});

用法：

<a href="#" markable>Mark me</a>

小提琴：http://jsfiddle.net/atE4A/1/

Answer 2

你可以这样做：

<a href="..." ng-click="setItem($event)">...</a>

然后你可以使用this.ClassName获取第n个项目。

但如果您的＃项是任意的，您可以考虑尝试以可以使用ng-repeat的方式格式化列表，那么就像这样简单：

<a href="..." ng-click="setItem($index)">...</a>

在ng-click上向元素添加CSS类

我缺少什么

2 个答案: