在promise.then()中没有禁用按钮.final()

时间:2014-08-29 15:59:40

标签: jquery angularjs promise

我遇到了一个angularJS $ http调用的问题,该调用返回一个带有.then()和.finally()的promise(见下面的代码):

    $scope.edit = function () {
        $('.alert').addClass('hidden');

        $scope.showError = false;
        $scope.showSuccess = false;

        var btn = $('#submit-link-edit');
        btn.button('loading');

        context.linksRepo.edit($scope.link)
            .then(
                function (response) { // success
                    $scope.showSuccess = true;

                    // if it works make sure we update all of our variables
                    cachedURL = $scope.link.URL;
                    $scope.cachedAKA = $scope.link.AKA;
                    $scope.cachedUpdateDate = $scope.link.UpdateDate;
                    $scope.cachedUpdatedBy = $scope.link.UpdatedBy;

                    // show completeness on button
                    btn.button('complete');
                },
                function (response) { // failure
                    $scope.showError = true;

                    // if it doesn't work reset our variables
                    $scope.link.URL = cachedURL;
                    $scope.link.AKA = $scope.cachedAKA;
                    $scope.errorMessage = response.data.Message;

                    // show save changes on button again
                    btn.button('reset');
                })
            .finally(
                function () {
                    // this doesn't work
                    $scope.editDisabled = true;
                });
    }

基本上我的页面上有一个禁用按钮,可以通过用户输入启用:

            <button id="submit-link-edit" type="submit" class="btn btn-success" ng-disabled="editDisabled" data-loading-text="Saving..." data-complete-text="Saved">
                Save Changes
            </button>

当启用并单击该按钮时,它会调用我的$scope.edit函数,该函数调用我工厂(context)中返回promise的方法。我使用.then()来确定该呼叫的成功或失败,并相应地设置按钮(让它说&#34;保存&#34;或者恢复为&#34;保存更改&#34;再次)然后a .finally()将按钮设置为已禁用,因为我不希望他们再次点击该按钮而不进行输入更改,从而为其启用。

修改 我将代码切换为使用指令而不是直接DOM操作

可能值得注意的是(不知道为什么我之前忘记提及它).button()来自bootstrap.js,用于切换启用/禁用以及按钮上的文字和我非常强烈地感觉到引导脚本和角度脚本之间的某些东西在修改按钮时都会出现问题。

1 个答案:

答案 0 :(得分:1)

正如另一个人所说,试试角度方式。然后你可以在.then和.finally方法中引用$ scope上的变量。

<button ng-model="btn" ng-disabled="isBtnDisabled">Button</button>

然后你可以设置$ scope.isBtnDisabled = true或false;

https://docs.angularjs.org/api/ng/directive/ngDisabled

    <div ng-app="">
      <div ng-controller="Ctrl1">
        <button ng-disabled="isBtnDisabled">Button</button>
      </div>
    </div>
<script>
  function Ctrl1($scope) {
    $scope.isBtnDisabled = true;
  }
</script>