AngularJS - 使用ng-class指令在特定按钮上切换类

Directive

myApp.directive('vlcObject', function ($compile, $rootScope, $timeout, $window) {
var vlcPlayerId = '';
var linker = function (scope, element, attrs) {

scope.muteClass = 'fa fa-volume-on';

<button id=mute_uniqId ng-click="doMute(uniqId)"><i ng-class="muteClass"></i></button>

scope.doMute = function(uniqId){
    var vlc = scope.getVLC("vlc");
     if (vlc && vlc.playlist.isPlaying) {
        vlc.audio.toggleMute();
        scope.controlClass = 'fa fa-volume-off';
    }else{
        scope.controlClass = 'fa fa-volume-on';
    }
}

};
return {
    restrict: "E",
    link: linker
};

});

If there are multiple buttons, toggling class is applied to every button.

如果有多个按钮,则每个按钮都会应用切换类。

How do I toggle class to button which is clicked and not every other button using ng-class directive ? i.e. scope.controlClass should be applied only to button which is clicked.

如何使用ng-class指令将类切换到单击的按钮而不是每个其他按钮?即scope.controlClass应仅应用于单击的按钮。

2 个解决方案

#1

Here is my comment as an answer + a response to your feedback:

以下是我的评论作为答案+对您的反馈的回复:

1) In your JS code, you should use:

1)在你的JS代码中,你应该使用:

$scope.doMute = function(...) {...} ;

and:

$scope.muteClass = 'fa fa-volume-on';

if you want Angular to perform bi-directional binding. Angular's object is $scope and not scope, and NO, scope is NOT a directive.

如果你想让Angular执行双向绑定。 Angular的对象是$ scope而不是scope,而NO,scope不是指令。

Last, your HTML should be:

最后,您的HTML应该是:

<button id=mute_uniqId ng-click="doMute(uniqId)"><i ng-class="{{muteClass}}"></i></button>

#2

Use $event

You can pass $event to the doMute function.

您可以将$ event传递给doMute函数。

So the doMute function become:

所以doMute函数变成:

scope.nomuteClass = 'fa fa-volume-on';
scope.muteClass = 'fa fa-volume-off';
scope.doMute = function(uniqId, event){
        var vlc = scope.getVLC("vlc");
         if (vlc && vlc.playlist.isPlaying) {
            vlc.audio.toggleMute();
            angular.element(event.target).children().removeClass(scope.muteClass).addClass(scope.nomuteClass);
        } else{
            angular.element(event.target).children().removeClass(scope.nomuteClass).addClass(scope.muteClass);
        }
}

And your element:

你的元素:

<button id=mute_uniqId ng-click="doMute(uniqId, $event)"><i></i></button>

#1