Question

我有很多电影，想想Netflix。每部电影都分配了许多标签：喜剧，恐怖等。

当我点击标签时，视图会相应地过滤，效果很好。但我还想做的是为所有标签添加一个类，与所有标签相同（在每个其他电影上），单击一个。

我可以做一个丑陋的jQuery：在click事件中包含，但感觉不对。

我是一名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

您应该在使用此指令的控制器和所选类别之间使用双向数据绑定。在控制器中，您可以拥有selectedCategory属性，并且对于列表中的每个电影，您可以在selectedCategory匹配时应用样式。然后是指令：

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

我还建议使用ng-click代替element.bind，但这不应该改变功能。

Answer 2

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

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

我没想到＆＃34;标签＆＃34;变量也可以在其他指令中使用，但这很棒！ =）

现在，当点击一个标签时 - 具有相同标签的每个其他电影也会获得该类集。由于双向数据绑定。

动态更改AngularJS中的指令类？

2 个答案: