CSS
ul {
display: none
}
span.active+ul {
display:block
}
html
<div ng-controller='exchangeFormCtr'>
<div toggle-class="active">
<ul>
<li ng-repeat='carrency in carrencies'>
</ul>
</div>
<div toggle-class="active">
<ul>
<li ng-repeat='carrency in carrencies'>
</ul>
</div>
</div>
Controller
exchange.controller('exchangeFormCtr',['$scope', function($scope) {
$scope.carrencies = [
{name:'mastercard'},
{name:'visa'},
{name:'paypal'}
];
}]);
指令
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
console.log(element);
element.toggleClass(attrs.toggleClass);
});
}
};
当我单击 span 指令时,更改类以激活或删除它。
如何捕获外部点击事件并通过 Angular 方式删除事件类?
最佳答案
您可以沿着元素点击的 stopPropagation() 将点击处理程序添加到文档对象。
var app = angular.module('my-app', [], function () {})
app.controller('AppController', function ($scope) {
$scope.message = "Welcome";
});
app.directive('toggleClass', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
console.log(element)
function elementClick(e) {
e.stopPropagation();
element.toggleClass(attrs.toggleClass);
}
function documentClick(e) {
element.removeClass(attrs.toggleClass);
}
element.on('click', elementClick);
$document.on('click', documentClick);
// remove event handlers when directive is destroyed
scope.$on('$destroy', function () {
element.off('click', elementClick);
$document.off('click', documentClick);
});
}
};
});
.active {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<span toggle-class="active">ff</span>
</div>
asdf
关于javascript - Angular 在指令中的元素外部单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30344074/