javascript - Angular 路线在单击时不起作用，但再次单击可以工作

Question

我有一个数据服务，它将处理所有与数据相关的操作，并且所有这些操作都是异步的。

一旦我单击“删除”按钮，就会有一个函数删除所有数据并返回一个包含操作状态的对象(成功:true/false)。

根据这个值(TRUE)，我需要路由到另一个 View (假设数据已成功删除页面)。

但是当我第一次单击按钮时，路由没有发生(但是删除功能给出了正确的值(true)。但是，如果我再次单击同一按钮，该路线就会发生。

这是我如何使用我的 removeDatabase() (dataService 的一部分)函数。

    self.removeDatabase = function () {
        //$location.path("/setup");
        dataService.resetDatabase().done(function (msgs) {
            if(msgs['Operation_success']){
                console.log("Operation is Success ? :"+msgs['Operation_success']);
                $location.path("/setup");
                //self.loadSetup();
            }
        });
    },

这是服务内部的函数。

appdata.resetDatabase = function () {
        appdata.msgs = {};
        var deferred = jQuery.Deferred();
        appdata.db = window.openDatabase("finbud_db", "1.0", "FinBud", 20);

        var d1 = jQuery.Deferred();
        appdata.db.transaction(function (tx) {
            tx.executeSql('DROP TABLE IF EXISTS BASE_TABLE');
        }, function () {
            appdata.msgs['BASE_TABLE'] = "Could not Delete";
            appdata.msgs['Operation_success'] = false;
            d1.resolve();
        }, function () {
            appdata.msgs['BASE_TABLE'] = "Deleted";
            appdata.msgs['Operation_success'] = true;
            d1.resolve();
        });

        var d2 = jQuery.Deferred();
        appdata.db.transaction(function (tx) {
            tx.executeSql('DROP TABLE IF EXISTS CATEGORY_TABLE');
        }, function () {
            appdata.msgs['CATEGORY_TABLE'] = "Could not Delete";
            appdata.msgs['Operation_success'] = false;
            d2.resolve();
        }, function () {
            appdata.msgs['CATEGORY_TABLE'] = "Deleted";
            appdata.msgs['Operation_success'] = true;
            d2.resolve();
        });

        var d3 = jQuery.Deferred();
        appdata.db.transaction(function (tx) {
            tx.executeSql('DROP TABLE IF EXISTS ACCOUNTS_TABLE');
        }, function () {
            appdata.msgs['ACCOUNTS_TABLE'] = "Could not Delete";
            appdata.msgs['Operation_success'] = false;
            d3.resolve();
        }, function () {
            appdata.msgs['ACCOUNTS_TABLE'] = "Deleted";
            appdata.msgs['Operation_success'] = true;
            d3.resolve();
        });

        var d4 = jQuery.Deferred();
        appdata.db.transaction(function (tx) {
            tx.executeSql('DROP TABLE IF EXISTS TRANSACTIONS_TABLE');
        }, function () {
            appdata.msgs['TRANSACTIONS_TABLE'] = "Could not Delete";
            appdata.msgs['Operation_success'] = false;
            d4.resolve();
        }, function () {
            appdata.msgs['TRANSACTIONS_TABLE'] = "Deleted";
            appdata.msgs['Operation_success'] = true;
            d4.resolve();
        });

        jQuery.when(d1, d2, d3, d4).done(function () {
            deferred.resolve(appdata.msgs);
        });
        return deferred.promise();

    };

最后 HTML 是:

    <md-button  ng-click="appCtrl.removeDatabase();">
        <i class="mdi mdi-reload"></i> Reset App 
    </md-button>

任何帮助表示赞赏。谢谢

Answer 1

您必须调用 $scope.$digest() 来通知 Angular 某些内容已发生更改。我建议使用 Angular 内置 $q Promise 库而不是 jquery Promise:

var d1 = $q.defer();
...
d1.resolve();
...
return $q.all([d1, d2, d3, d4]).then(function () {
    return appdata.msgs;
});