Css 动态更改AngularJS中指令的类？

我有很多电影，比如Netflix。每部电影都有许多标签：喜剧、恐怖等

当我点击一个标签时，视图会相应地被过滤，这非常有效。 但我还想做的是在所有标记中添加一个类，使用与单击的相同的名称（在其他每部电影中）

我可以在click事件中创建一个丑陋的jQuery:contains，但这感觉不对

我是一个AJS noob，但我相信有更好的AJS方式来实现这一点

(function () {
var directive = function () {
    return {
        restrict: 'A',
        template: '<li data-ng-repeat = "tag in movie.genre">{{tag}}</li>',
        link    : function ($scope, element, attrs) {
            element.bind('click', function (e) {
                var linkText = e.target.innerText;

                if ($scope.$parent.category === linkText) {
                    return;
                }

                $scope.$parent.category = linkText;
                $scope.$apply();
            })
        }
    };
};

angular.module('videoApp')
    .directive('videoTags', directive);
}());

（函数（）{
var指令=函数（）{
返回{
限制：“A”，
模板：“
{{tag}
”，
链接：函数（$scope，element，attrs）{
元素绑定（'click'，函数（e）{
var linkText=e.target.innerText；
如果（$scope.$parent.category===linkText）{
返回；
}
$scope.$parent.category=linkText；
$scope.$apply（）；
})
}
};
};
角度。模块（'videoApp'）
.指令（“视频标签”，指令）；
}());

您应该在使用此指令的控制器和所选类别之间使用双向数据绑定。在控制器中，可以有一个

selectedCategory

属性，如果

selectedCategory

匹配，则可以为列表中的每部电影应用样式。那么对于指令：

return {
    scope: {category: "=selectedCategory"}

---

我还建议使用

ng click

而不是

element.bind

，但这不会改变功能。

我仍然在使AJS的事情复杂化，解决方案非常简单。 只需将模板属性更改为：

template: '<li data-ng-class="{\'active\' : category === tag}" data-ng-repeat = "tag in movie.genre">{{tag}}</li>',

template:“
{{{tag}}
”，

我没想到“tag”变量也能在其他指令中使用，但这太棒了！=）

---

现在，当一个标签被点击时，其他每一部有相同标签的电影也会被设置为类。由于双向数据绑定。

我给了您投票支持，但我选择了另一种解决方案。