如何将Class添加到模板指令元素中？

我是AngularJs指令的新手。我想要做的是，我需要添加一个简单的类到模板指令中的一个元素点击。例如：如何将Class添加到模板指令元素中？

var app = angular.module("peykaar",[]); 
 

 
app.controller('main', function($scope , $rootScope) { 
 

 
$scope.arry = ["Apple","banana","orange"]; 
 

 
}); 
 

 
app.directive("customCheckbox", function() { 
 
    return { 
 
        restrict: 'A', 
 
     replace: true, 
 
        scope: { 
 
      name:"@" 
 
     }, 
 
     link: function(scope, element, attrs){ 
 

 
      var logic = { 
 
       init: function(elem){ 
 
        var self = this; 
 
        elem.on('click', function(){ 
 
         if (elem.hasClass('tik')){ 
 
          self.unTik(elem); 
 
         } else if (elem.hasClass('untik')) { 
 
          self.tik(elem); 
 
         } 
 
        }); 
 
       }, 
 
       tik: function(elem){ 
 
        elem.addClass('custom_checked tik'); 
 
        elem.removeClass('untik'); 
 
       }, 
 
       unTik:function(elem){ 
 
        elem.removeClass('custom_checked tik'); 
 
        elem.addClass('untik'); 
 
       } 
 
      }; 
 

 
      logic.init(element); 
 
      
 
     }, 
 
        template: '<div><span class="custom_checkbox untik"></span><p>{{name}}</p></div>' 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="peykaar" ng-controller="main"> 
 

 
<div class="arry"> 
 
\t \t <span ng-repeat="item in arry track by $index" custom-checkbox name="{{item}}" id="$index"></span> 
 
\t </div> 
 
    
 
    </div>

那么，如何使用类element.addClass（ “选中”）跨越类= “custom_checkbox”

来源

2017-05-18 Amir Rezvani

有一个指令：https：//docs.angularjs.org/api/ng/directive/ngClass –

@ J.Titus谢谢你。但我需要知道如何从链接功能访问该元素。有帮助吗？ –

对不起，这超出了我对Angular的（非常）有限的了解。祝你好运。 –

可以使用纳克级的加固定。声明一个onClick并在点击时分配true。例如

Var onClick = true; <span ng-class={ 'custom' : onClick}></span>

来源

2017-05-18 17:51:51

如何将Class添加到模板指令元素中？

回答

相关问题