Angular 路由在单击时不起作用，但再次单击时起作用

Question

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

一旦我点击 ERASE 按钮，就会出现一个擦除所有数据的功能和 return 一个包含操作状态的对象（成功：true /false）。

基于这个值（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 某些内容已更改。我建议使用内置于 $q 承诺库中的 angular 而不是 jquery 承诺：

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

Answer 2

karaxuna 提供的答案是正确的。这是答案的扩展。

如果我喜欢下面的内容，这将 return 所有 4 个承诺合而为一。所需的数据是 appdata.msgs，它在每个承诺中（在 d.$$state 中）。

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

默认情况下所有函数都会return延迟对象。但是我想明确地return appdata.msgs。所以现在我需要 4 个函数来 return 数据而不是延迟。

为了实现这一点，我在四个函数中的每一个函数中都用 appdata.msgs（最后也是 return 来解决承诺）。

现在 all() 函数将 return appdata.msgs 在所有这些函数都解析后（记住我用 appdata.msgs).

解决

代码如下：

 function d1() {
   
   var d1 = $q.defer();
   
   ......
   //some where
   d1.resolve(msgs);
   .......
   
   return d1.promise;
}

................

 function dN() {
   
   var dN = $q.defer();
   
   ......
   //some where
   dN.resolve(msgs);
   .......
   
   return dN.promise;
}

return $q.all([d1(), d2(),  ....., dN()]).then(
  
         function () {
  
            return msgs;
  
         },
               
         function(){
  
            msgs['Operation_success'] = false;
            return msgs;
  
         });

如果我的理解有误，请纠正我。谢谢。

Angular 路由在单击时不起作用，但再次单击时起作用

Angular route is not working on single click but clicking again is working

javascript

routing

asynchronous

angularjs

ngroute