Question

我是AngularJs指令的新手。我想要做的是，我需要在click模板指令中的一个元素中添加一个简单的类。例如：

＆＃13;

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>'
    }
});

＆＃13;

<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>

＆＃13;

那么如何使用element.addClass（＆＃34; checked＆＃34;）添加Class以跨越class =＆＃34; custom_checkbox＆＃34;

Answer 1

您可以使用ng-class进行修复。声明onClick并在单击时指定true。例如

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

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

1 个答案: