Dynamically changing a class for a directive in AngularJS?

Question

I have a buch of movies, think Netflix. Each movie have a number of tags assigned to it: Comedy, Horror etc.

When I click on a tag the view is filtered accordingly, that works great. But what I also wish to do is to add a class to all the tags, with the same name (on every other movie), as the one clicked.

I could do an ugly jQuery :contains in the click-event, but that doesn't feel right.

I'm a AJS noob, but I'm sure there's a better AJS way of achieving this?

(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);
}());

Explosion Pills · Accepted Answer · 2014-11-03 16:19:34Z

1

You should use a two-way data binding between the controller that uses this directive and the selected category. In the controller you could have a selectedCategory property and for each movie in the list you can apply styles if selectedCategory matches. Then for the directive:

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

I would also suggest using ng-click instead of element.bind but that shouldn't change functionality.

answered Nov 3, 2014 at 16:19

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jBoive Over a year ago

I gave you a vote for effort, but I've chosen another solution.

jBoive · Accepted Answer · 2014-11-03 17:07:26Z

0

I'm still complicating things with AJS, the solution was very simple. Simply change the template property to:

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

I didn't expect the "tag" variable to be available in other directives as well, but this is great! =)

Now, when a tag is clicked - every other movie with that same tag also get's the class set. Due to two-way data binding.

answered Nov 3, 2014 at 17:07

jBoive

1,3092 gold badges17 silver badges42 bronze badges

Collectives™ on Stack Overflow

Dynamically changing a class for a directive in AngularJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related