Обработчик события click в Angular директиве, вызываемом дважды

Question

Созданная директива с клик-событием для клика, но дважды щелкните по вызову.

stopPropagation не может помочь мне

angular.module('dod').directive('checkbox', [function() { 
    var checkbox = { 
     restrict: 'A', 
     replace: false, 
     transclude: false, 
     link: function (scope, elem, attrs) { 
      elem.on('click', function (e) { 
       elem.toggleClass('checked'); 
      }); 
     } 
    }; 

    return checkbox; 
}]); 

Answer 1

Манипуляции с DOM, как вы показали, это не очень хорошая идея. Это «не угловой путь». Поскольку вы пытаетесь переключить элемент вы щелкать, это выглядит, как вы кошки попробовать этот подход от angularjs документа:

<script> 
    angular.module('checkboxExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.checkboxModel = { 
     value1 : true, 
     value2 : 'YES' 
    }; 
    }]); 
</script> 
<form name="myForm" ng-controller="ExampleController"> 
    <label>Value1: 
    <input type="checkbox" ng-model="checkboxModel.value1"> 
    </label><br/> 
    <label>Value2: 
    <input type="checkbox" ng-model="checkboxModel.value2" 
      ng-true-value="'YES'" ng-false-value="'NO'"> 
    </label><br/> 
    <tt>value1 = {{checkboxModel.value1}}</tt><br/> 
    <tt>value2 = {{checkboxModel.value2}}</tt><br/> 
</form> 

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D