0

シングルページアプリケーション用に Node Webkit 内で Angular と TingoDB (Mongo) を使用しています。しかし、解決できなかった奇妙な問題があります。

オブジェクト リテラル (オプション 2) を使用すると、データが html ページに正しく表示されます。ただし、データベースからデータを返すようにコードを変更すると (オプション 1)、結果は html ページに表示されません。両方のスタイルのデータを JSON 文字列に変換して一貫性を証明し、angular.fromJSON を使用してオブジェクトを返しました。どちらのメソッドも console.log で同じ JSON 文字列を返します。誰かが尋ねる前に、オプション 1 またはオプション 2 のいずれかをコメントアウトして、両方が同時に実行されないようにしました。

TingoDB から渡されたデータに基づいて JSON 文字列を console.log にコピーし、それを以下のコードに再入力して、他のコードを変更せずに 2 つのバージョンのデータに違いがないことを確認しましたが、問題は解決しません。持続します。

これが発生する理由と修正方法を誰かが明らかにできますか?

var app = angular.module('myApp', []);
var Engine = require('tingodb')(),
    assert = require('assert');

var db = new Engine.Db('./db', {});
var collection = db.collection("clean.db");

app.controller('tingoDataCtrl', ['$scope', function($scope) {



     function getData(callback) {
        //Option 1
          collection.find().toArray(function(err, docs){
                callback (JSON.stringify(docs));
           });

          //Option 2
           var docs = [
               {name:"tingo1", description:"56",_id:2},
               {name:"tingo2", description:"33",_id:3},
               {name:"tingo3", description:"22",_id:4},
               {name:"tingo4", description:"76",_id:5},
               {name:"tingo5", description:"99",_id:6}
           ];   
           callback (JSON.stringify(docs));
  }

    function info(b) {
        // I'm the callback
        console.log(b);
        $scope.items = angular.fromJson(b)
    }

    getData(info);

}]);

そしてHtml

<body ng-app="myApp" id="main">

<div class="page page-data ng-scope">


    <section class="panel panel-default" ng-controller="tingoDataCtrl">
    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> Tingo Data</div>

        <table class="table">
            <thead>
            <th class="col-md-4">
              Name
            </th>
            <th class="col-md-8">
              Description
            </th>
            <th class="col-md-8">
              ID
            </th>
            <th></th>
            <tr>
            </tr>

            </thead>
            <tbody>
            <!-- <tr class="reveal-animation" ng-repeat="item in items | filter:query"> -->
            <tr ng-repeat="item in items | filter:query">
              <td>{{item.name}}</td>
              <td>{{item.description}}</td>
              <td>{{item._id}}</td>

            </tr>
            </tbody>
        </table>
    </section>
</div>
<script src="js/tingo_problem.js"></script>
 </body>
4

1 に答える 1

0

TingoDB は、アプリを停止することなくバックグラウンドで動作する非同期 API です。これは、同期コードが応答を待つ時間がないことを意味し、その代わりに undefined が返されます。

あなたの場合、非同期呼び出しを実行し、メモリへの回答を正しく返しますが、遅すぎるため、javascript にデータが含まれていても、DOM は既に未定義で更新されています (console.log を試して、それがあったことを確認してください)。そこの）。

Angular には、コントローラーの新しい要素で DOM を再度強制的に更新する方法があります。$apply と呼ばれます。そして、予期しない動作を回避するためにそれを使用する最良の方法は次のとおりです。

function info(b) {
    // I'm the callback
    console.log(b);
    $scope.items = angular.fromJson(b);
    if (!$scope.$$phase) {
       $scope.$apply(); //forces update the view
    }
}//$scope is NECESARY to be defined in the controler, avoid using it with "ControlerAs"
于 2015-02-23T13:48:01.757 に答える