Question

我对Angularjs很陌生我一直试图让这段代码正常工作，但我还没有。我需要在点击时添加和删除一个类。

我的jQuery版本工作正常：

   $('.toggle').on('click', function() {
      $('.container').stop().addClass('active');
});

   $('.close').on('click', function() {
      $('.container').stop().removeClass('active');
 });

在我的HTML中：

   <div class="toggle" toggle-class="active"></div>

从我所读过的内容来看，使用指令是最合适的。在我的指令中，我有这段代码：

 app.directive('toggleClass', function() {
      return {
    restrict: 'A',
    controller: 'LoginCtrl',
    controllerAs: 'LoginC',
link: function(scope,  element) {
       element.click(function(){
            if(element.attr('toggle') === 'active') {
                angular.element(element).addClass('active');
            } else {
                 angular.element(element).removeClass('active');

            }
        });
    }
};

}）;

我错过了什么。有人可以建议吗？我真的很感激。谢谢

Answer 1

您的指令可以大大简化。

angular.module("myApp").directive('toggleClass', function() {
     return {
         restrict: 'A',
         controller: 'LoginCtrl',
         controllerAs: 'LoginC',
         link: function(scope, elem, attrs) {
             elem.on('click', function(e){
                 if (attrs.toggleClass === 'active') {
                     elem.toggleClass('active');
                 };
             });
         }
     }
})

Answer 2

正如佐多所说，它更容易

<div ng-class="{'active':someVal}" ng-click="someVal = !someVal"></div>

Angularjs addClass / removeClass

2 个答案: