AngularJS：防止 ng-click 被执行答案

【问题标题】：AngularJS: prevent ng-click from being executedAngularJS：防止 ng-click 被执行
【发布时间】：2016-02-25 13:58:51
【问题描述】：

这是我正在修改的指令的伪代码。假设我有以下事件处理程序：

<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 事件从指令的链接事件侦听器中执行吗？

【问题讨论】：

标签： javascript angularjs event-handling angular-directive

【解决方案1】：

您可以在 ng-click 中执行比较表达式，并使用标志检查真假。如果为 true，则 ng-click 将处于活动状态，否则将被禁用。

示例：如果 hasBackground = true 则执行扩展功能。

<i style="cursor: pointer" class="fa fa-expand fa-3x" ng-click="hasBackground || expand()"></i>

希望能带来好运。

【讨论】：

【解决方案2】：

也许像this？

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");   
    }
}]);

【讨论】：

非常有趣的方法。我很高兴我可以在这种特殊情况下使用模板，否则它将无法正常工作。

【解决方案3】：

你可以试试

e.stopPropagation()

为你工作。

【讨论】：