AngularJS:防止执行ng-click

时间:2015-11-23 12:45:44

标签: javascript angularjs event-handling angular-directive

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

<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事件吗?

1 个答案:

答案 0 :(得分:1)

你可以在你的ng-click中做一个比较表达式,并用一个标志检查true或false。 如果确实如此,则ng-click将处于活动状态,否则将被禁用。

示例:如果hasBackground = true,则执行expand函数。

<i style="cursor: pointer" class="fa fa-expand fa-3x" ng-click="hasBackground || expand()"></i> 
希望能帮助你好运。