角度在指令中的元素外部单击
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指令时,将类更改为活动或删除它。
如何捕捉外部点击事件并通过角度方式移除活动类?
您可以在元素click的stopPropagation((中向文档对象添加一个click处理程序。
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>
相关文章:
- 单击元素外部时进行JQuery
- 如何使toggleClass()在元素外部单击时工作
- 如果在Div元素外部单击,请关闭该元素
- 如何使用AngularJsOnly在元素外部单击时关闭元素
- d3.js在元素外部单击时,隐藏该元素
- addClass”;输入无效”;输入dos't显示,直到我在输入元素外部单击为止
- 在元素外部单击时激发事件的指令
- 在 jQuery 中从父元素外部单击“this”时如何切换子元素
- 如何在元素外部单击时使用 jQuery 隐藏元素
- 我们如何检测元素外部的双击
- Javascript / jQuery - 点击iPhone上的元素外部
- 当我在单击元素外部时,如何删除添加到单击元素的功能
- 在触发元素外部单击时隐藏元素
- 处理通过聚焦在子元素上并通过单击子元素外部触发的父元素的模糊事件
- 确定焦点何时出现在元素外部
- 在父元素外部单击时删除类
- 在弹出元素外部单击时关闭bPopup
- 使用JavaScript检测元素外部的点击
- 如何检测元素外部的点击,但该元素有子元素
- 如何检测元素外部的触摸端事件