![](/img/trans.png)
[英]Apply style to element when click outside of directive attribute element in Angular
[英]Angular Click outside of an element in directive
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>
調節器
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指令將類更改為活動或刪除它時。
如何捕獲外部點擊事件並通過角度方式刪除活動類?
您可以沿元素單擊的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
您的指令中有一些缺少的結尾字符。 看到這個工作小提琴
myApp.controller('exchangeFormCtr',['$scope', function($scope) {
$scope.carrencies = [
{name:'mastercard'},
{name:'visa'},
{name:'paypal'}
];
}
myApp.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
console.log(element);
element.toggleClass(attrs.toggleClass);
});
}
}
});
使用ng-class
和一些filters
來提取選定的值
var exchange = angular.module('App', []); exchange.controller('exchangeFormCtr', ['$scope', function($scope) { $scope.carrencies = [{ name: 'mastercard' }, { name: 'visa' }, { name: 'paypal' }]; $scope.selectAll = function() { angular.forEach( $scope.carrencies, function(carrency) { console.log('ici') carrency.active = true; }); } } ]);
.active { background-color: green; color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="App" ng-controller="exchangeFormCtr"> <span ng-click="selectAll()">select all!</span> <p ng-repeat="selected in carrencies"> <span ng-class="{active: selected.active}" ng-click="selected.active = !selected.active"> {{selected.name}} {{selected.active}} </span> </p> <p>actives are : <span>{{ carrencies | filter: {active:true} }}</span></p> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.