防止从 Angular 指令回发

Question

我有一个 runat="server" 锚，在 href 中有 __doPostBack。

我想在单击锚点时验证是否已完成另一个字段，并且仅当该字段不为空时才允许回发。

我添加了一个自定义指令来处理这个问题，如下所示：

angular.module('app').directive('notEmpty', function ($timeout, $document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function (event) {

                return $timeout(function () {
                    var elementToCheckNotEmpty = $document[0].querySelector(attrs.notEmpty);

                    if (!elementToCheckNotEmpty.value) {
                        scope.addInvalidClass = true; // input has an ng-class binding to $scope.addInvalidClass
                        event.preventDefault();
                        event.stopPropagation();

                        return false;
                    }
                });
            });
        }
    }
});

这不会阻止回发。更新 scope 属性并将 class 添加到输入是有效的，因为我看到无效的 class 在回发发生时应用了几秒钟。

我明白 $timeout returns 是一个承诺，所以我尝试将 then 链接到 $timeout 上，如下所示：

return $timeout(function () {
    var elementToCheckNotEmpty = $document[0].querySelector(attrs.omwNotEmpty);

    if (!elementToCheckNotEmpty.value) {
        scope.addInvalidClass = true;
    }
}).then(function () {
    if (scope.addInvalidClass) {
        event.preventDefault();
        event.stopPropagation();
        return false;
    }
});

但这也不能阻止回发。这是一个带有共享主页的 webforms 项目，所以我无法在不影响许多其他页面的情况下真正更新 form 元素。该表单确实有一个空的 action 属性。此外，ng-controller 属性位于内部元素 form 元素上，不确定这是否有所不同...

我做错了什么？我是 Angular 的新手，顺便说一句，如果这是微不足道的，我深表歉意！

Answer 1

使用 $timeout 将函数添加到异步队列，从而不会阻止回发。当不使用 $timeout 服务时绑定不会改变，因为点击不在 angular 摘要周期内。而不是 $timeout 将范围更改包含在 scope.$apply() 中，或者您可以只使用 ng-click 而不是 element.bind.

防止从 Angular 指令回发

Prevent postback from Angular directive

webforms

angularjs

angularjs-directive