css - 在 AngularJS 中动态更改指令的类？

Question

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

当我点击一个标签时， View 会相应地进行过滤，效果很好。 但我还想做的是为所有标签添加一个类，与点击的标签具有相同的名称(在所有其他电影上)。

我可以做一个丑陋的 jQuery :contains 在点击事件中，但感觉不对。

我是 AJS 菜鸟，但我确定有更好的 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);
}());

Answer 1

您应该在使用此指令的 Controller 和所选类别之间使用双向数据绑定(bind)。在 Controller 中，您可以拥有一个 selectedCategory 属性，如果 selectedCategory 匹配，您可以为列表中的每部电影应用样式。然后对于指令:

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

我还建议使用 ng-click 而不是 element.bind 但这不应改变功能。