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

Question

我是AngularJs指令的新手。 我想做的是，單擊時需要在我的模板指令中的一個元素中添加一個簡單的類。 例如：

 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"> <span ng-repeat="item in arry track by $index" custom-checkbox name="{{item}}" id="$index"></span> </div> </div> 

所以我該如何使用element.addClass（“ checked”）添加Class以跨越class =“ custom_checkbox”

Answer 1

您可以使用ng-class進行修復。 聲明一個onClick並在單擊時分配true。 例如

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