Angular，绑定在使用 Promise.catch 时不起作用答案

【问题标题】：Angular, Binding doesn't work when use Promise.catchAngular，绑定在使用 Promise.catch 时不起作用
【发布时间】：2017-01-30 09:36:42
【问题描述】：

我使用 Auth0 登录，我有以下代码：

$scope.login = function () {
        $scope.loginFailed = false;
        $scope.loading = true;

        loaderService.show();

        let credentials = {
            email: $scope.email,
            password: $scope.password
        };
        principal.signin(credentials)
            .then(() => {
                $state.go('main.index');
            })
            .catch(e => {
                showError(e.error_description);
                loaderService.hide();
            });
    };

principle 服务包含登录功能：

signin(credentials) {
        return new Promise((resolve, reject) => {
            this.auth.signin({
                connection: 'Username-Password-Authentication',
                email: credentials.email,
                sso: false,
                password: credentials.password,
                authParams: {
                    scope: 'openid name email'
                }
            }, this.onLoginSuccess.bind(this, resolve, reject), this.onLoginFailed.bind(this, reject));
        });
    }

所以，如您所见，我创建了 Promise 并将 resolve/reject 传递给 Auth0 回调。回调非常简单：

onLoginSuccess(resolve, reject, profile, token) {
        let userData = this.collectData(profile);
        ... store token
        return this.syncCurrent(userData) //request to server
            .then(() => {
                return resolve();
            })
            .catch(() => {
                this.signOut();
                return reject();
            });
}

onLoginFailed(reject, error) {
        return reject(error.details);
}

那么，让我们回到第一个sn-p。有如下代码：

principal.signin(credentials)
                .then(() => {
                    $state.go('main.index');
                })
                .catch(e => {
                    showError(e.error_description);
                    loaderService.hide();
                });

当我使用正确的电子邮件/密码重定向工作正常，我看到主页。但是当我使用错误的电子邮件/密码时，我看到catch 块被执行，我看到调试器中的值发生了变化，但我没有看到错误块并且加载图像没有消失。这在 html 中不是问题，因为我现在正在重构代码，并且上面的所有代码都在一个文件中，并且我没有使用 Promise，并且一切正常。我试图在principal.signin(credentials) 函数之前执行showError 方法，只是为了测试，我看到错误并且加载图像被隐藏。所以，我认为问题出在 promises 和 catch 块上，但我不知道在哪里。

PS。 showError 如下：

function showError(errorText) {
        $scope.loading = false;
        $scope.loginFailed = true;
        $scope.loginErrorMessage = errorText;
    }

【问题讨论】：

我坚信原因是在 signin() 中使用了非 Angular 承诺。 Angular Promise ($q) 很特别，因为它们调用了摘要循环。如果您必须使用外部Promise，请在可用范围内调用$apply()（例如$rootScope）。
@NikosParaskevopoulos 刚刚尝试了$apply，我现在在 html 中看到错误，但加载图像仍然可见。我会尝试改写为qpromises 并让你知道。谢谢。
@NikosParaskevopoulos 是的，你是对的。 $q 一切正常。再次感谢。你能创建答案，我会标记它。

标签： javascript angularjs promise

【解决方案1】：

这个问题的原因是使用了非 Angular 的 Promise。 Angular 承诺，即$q 服务，负责在它们解决后调用摘要循环。摘要循环是 Angular 1 中变更检测的实现，即通知观察者并使操作发生的内容。

使用$q 可以解决这个问题。

代码中的then 部分可能有效，因为它调用了$state.go()，而$state.go() 又调用了摘要循环。 catch 部分没有，因此这些更改永远没有机会解雇观察者。

【讨论】：