Angular 在视图中看不到我的数组更改

Question

我将 angularjs 与 Node-webkit 一起使用，并使用 nedb（作为嵌入式数据库）制作桌面应用程序。

我的问题是，当我（通过服务）从数据库加载对象列表并尝试在视图中显示它们（使用 ng-repeat）时，视图看不到加载的数据（看起来像它没有得到任何更新）

当我放置静态数据时:

$scope.levels  = [{_id:'abcd'},{_id:'efgh'}];

视图得到它没有任何问题。

我做了一些研究，看起来这与 $apply 有关 $digest...我不确定。

这是我的代码：

    //router
    .state('level', {
    url: '/level',
   templateUrl:'frontend/components/level/views/level.html',
                                                                         controller: 'LevelController'

                    })

控制器从数据库异步加载数据：

levelModule.controller('LevelController', function($scope,$rootScope,LevelService) {

//  $scope.levels  = [{_id:'abcd'},{_id:'eff'}];
  $scope.levels  = [];

  LevelService.getAllLevels(function(lvs) {
    console.log("tous "+JSON.stringify(lvs));
    $scope.levels = lvs;
  });

这是我的服务：

levelModule.factory('LevelService', function(DB_URL) {
    var Datastore = require('nedb')
    , path = require('path');
    db = {};
    db.levels = new Datastore({ filename:DB_URL+'/levels.db',autoload: true });


            return  {

                    getAllLevels : function(callback) {
                                            db.levels.find({}, function (err, lvs) {
                                                if(err)
                                                            console.log(err);
                                                        else

                                                            callback(lvs);


                                            });
                    },

                    insertLevel: function(level,callback) {
                        db.levels.insert(level, function (err, lv) {
                            if(err)
                                        console.log(err);
                                    else
                            callback(lv);
                        });
                    },
                    upsertLevel: function(level,callback) {

                        db.levels.update({_id: level._id}, {_id: level._id,price: {t1:{},t2:{},t3:{}}}, { upsert: true }, function(err,numReplaced,lv){
                                if(err)
                                        console.log(err);
                                    else
                            callback(numReplaced,lv);
                        });

           }
        };

});

最后是我的观点：

<table  class="table table-bordered table-hover">
     <tr ng-repeat="level in levels">
         <td>
           {{level._id}}
          </td>

         <td>
             <button ng-click="loadPrices(level)" type="button" class="btn btn-default" data-animation="am-fade-and-scale" data-template="frontend/components/level/views/level.edit.html" data-placement="center" bs-modal="modal">
                 <i class="fa fa-pencil-square-o"></i> Modifier
             </button>
         </td>
     </tr>
</table>

有什么帮助吗？

Answer 1

通过将 $apply() 放在异步函数中解决：

 LevelService.getAllLevels(function(lvs) {

    $scope.levels = lvs;
    $scope.$apply();
  });

Answer 2

您使用的是旧式回调，它发生在 Angular 摘要之外。很高兴您通过调用 $apply 让它工作，但您应该尝试将您的服务修改为 return a Promise。 Promises 是执行异步操作的 Angular 方式。

您可以在 https://thinkster.io/a-better-way-to-learn-angularjs/promises and https://docs.angularjs.org/api/ng/service/$q 阅读更多关于它们的信息。

Angular 在视图中看不到我的数组更改

Angular can't see my Array change in the view

angularjs

node-webkit