Question

我是JavaScript和AngularJS的新手。我做了一个演示，我用模态进行了简单的页面导航，所以当我点击一个按钮时，我将转到另一个页面。但我的问题是，当我点击该按钮两次时，它会打开同一页两次。我使用了超时功能，但我不知道为什么它不能用于我的演示，我的代码如下。

的JavaScript

$scope.foo = function() {
        if ($scope.filterflg !== "1" ) {
            $scope.filterflg = "1";
             $scope.disabled = true;


            gallery.pushPage("filter.html", {
                params: FkCategory
            });

            $timeout(function() {
                console.log("====timeout occured===");
                $scope.filterflg = "0";
                  $scope.disabled = false;
            }, 3000);
        }
    };

HTML

   <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="foo();" ng-disabled="disabled"
                  style="border: none; padding: 0 5px 0 0;">

Answer 1

setTimeout不会修改范围，因为它是本机JavaScript函数，它将在AngularJS上下文之外运行，而代码在AngularJS上下文之外运行，它正在改变AngularJS {{1在手动运行摘要周期之前，不会反映在UI上。

因此，您应该使用scope而不是setTimeout来运行摘要周期。

用户背后的另一个原因是能够点击两次按钮，你的$timeout ms（2000）超时时间太长了;根据需要减少它会立即生效。

2sec

Answer 2

你真的不应该在你的控制器中使用jquery选择器。

你应该尝试使用角度声明方式 -

<强>的JavaScript

$scope.foo = function() {
   $scope.disabled = true;
    gallery.pushPage("filter.html", {params:$scope.filteid});

$timeout(function() {
    console.log("======time out occured======");
    $scope.disabled = false;
}, 0);
};

<强> HTML

   <span class="toolbar-button--quiet navigation-bar__line-height" ng-click="foo();" ng-disabled="disabled"
                  style="border: none; padding: 0 5px 0 0;">

注意我如何使用ng-disabled指令而不是jquery操作。

祝你好运。

防止按钮被按下两次

2 个答案: