AngularJS:防止ng点击被执行
AngularJS: prevent ng-click from being executed
这是我正在修改的指令的伪代码。假设我有以下事件处理程序:
<a my-link ng-click="foo()" foo-check="fooCheck"></a>
angular.module('linkModule')
.directive('mylink', function () {
return {
restrict: 'A',
scope: {
fooCheck: '='
},
link: function link ($scope, $element) {
// bar method has some vital function
// for this directive`s functionality and must be run
// ONLY if certain conditions are met.
var bar = function bar () {
console.log('Executing bar');
};
$element.on('click', function (e) {
e.preventDefault();
// Validate something here
var mustContinue = $scope.fooCheck();
if ( mustContinue ) {
bar();
} else {
// Cancel ng-click here
}
});
}
};
});
因此,我的问题是:我可以阻止从指令的链接事件侦听器执行ng-click事件吗?
也许是这样的?
HTML
<a my-link ng-click="foo" foo-check="fooCheck" text="Click me!"></a>
JavaScript
var myApp = angular.module('myApp',[])
.directive('myLink',[function () {
return {
restrict: 'A',
scope: {
fooCheck: '=',
ngClick: '=',
text: '@'
},
template: '<div ng-click="click($event)">{{text}}</div>',
controller: function ($scope) {
var bar = function bar () {
console.log('Executing bar');
};
$scope.click = function(evt){
var mustContinue = $scope.fooCheck();
if (mustContinue) {
bar();
$scope.ngClick();
}
}
}
};
}]);
myApp.controller("myController",["$scope", function($scope){
$scope.fooCheck = function(){
return true;
}
$scope.foo = function(){
console.log("Foo executed");
}
}]);
您可以在ng点击中执行比较表达式,并使用标志检查true或false。如果它是真的,ng-click将处于活动状态,否则它将被禁用。
示例:如果hasBackground=true,则执行展开函数。
<i style="cursor: pointer" class="fa fa-expand fa-3x" ng-click="hasBackground || expand()"></i>
希望有助于好运。
如果
e.stopPropagation()
对您有效。
相关文章:
- 如何在angularjs中按顺序执行多数据ng应用程序
- 如何在ng中继器运行中执行功能
- AngularJS:如何在间隔后执行 ng-init
- 如何在一次有条件的ng单击时执行多个调用
- ng-if 连续执行方法
- 在angularjs复选框输入中更新ng模型或执行ng更改之前需要确认
- 验证指令代码在ng重复中的每个项目上执行
- ng提交未执行
- 在回调AngularJS ng-click样式中执行fn(param1,param2)
- 使用 class、ng-show 和 ng-class 执行 AngularJS 动画
- Angular ng-bind-html - 阻止执行JS代码
- ng 类指令调用执行两次
- 自动检查单选按钮并执行 ng 更改
- 如何正确执行ng repeat中的函数
- 如何使用按钮执行ng include
- 如何在指令之前执行ng-if,或者使用其他东西而不是ng-if
- 执行 ng-if 内部的代码,当它为假时
- 如果我在脚本中使用JQuery代码,则不会执行ng-repeat
- 让 Angular 在 d3.js 生成的新元素中执行 ng-if 操作
- 在执行ng-repeat和执行在HTML中没有反映的操作时,将作用域从HTML绑定到指令