Question

我正在使用带有Node-webkit的angularjs并使用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'

                    })

控制器异步加载来自DB的数据：

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

您正在使用旧学校回调，该回调发生在Angular摘要之外。通过调用$ apply让你工作很好，但你应该尝试修改你的服务以返回一个Promise。 Promise是执行异步操作的Angular方式。

您可以在https://thinkster.io/a-better-way-to-learn-angularjs/promises和https://docs.angularjs.org/api/ng/service/$q了解更多相关信息。

Answer 2

通过在异步函数中放入$ apply（）来解决：

 LevelService.getAllLevels(function(lvs) {

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

Angular无法在视图中看到我的Array更改

2 个答案: