AngularJS의 지시어에 대한 클래스를 동적으로 변경 하시겠습니까?

Question

나는 영화가 한 권 있는데, 넷플릭스를 생각해. 각 영화에는 코미디, 호러 등 많은 태그가 할당되어 있습니다.

태그를 클릭하면보기가 적절하게 필터링되어 잘 작동합니다. 하지만 내가하고 싶은 것은 모든 태그에 클래스를 추가하는 것입니다 (모든 다른 동영상에서). 클릭 한 것과 같은 이름으로 태그를 추가하는 것입니다.

나는 추악한 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"} 

나는 대신 element.bind의 ng-click를 사용하여 제안하지만 그 기능을 변경하지 마십시오.

Answer 2

나는 여전히 AJS로 문제를 해결하고 있지만 해결책은 매우 간단합니다. 는 단순히 템플릿 속성을 변경 :

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

나는 "태그"변수뿐만 아니라 다른 지시어에서 사용할 수 기대하지 않았다, 그러나 이것은 위대하다! =)

이제 태그를 클릭하면 동일한 태그를 가진 다른 모든 영화도 클래스 세트를 가져옵니다. 양방향 데이터 바인딩으로 인해.