1

私は現在、最初のAngularアプリを構築しようとしていますが、少し助けが必要になる可能性があります。

標準の$resourceアクションを使用してRESTサービスにアクセスしています。

angular.module('wtrack', ['ngResource']).
    factory('WtrackAPI', function($resource) {
      var WtrackAPI = $resource('http://hostname/wtrack/api/w/:id');
      return WtrackAPI;
    });

そしてこれは私のコントローラーです：

function ListCtrl($scope, $timeout, WtrackAPI){

    $scope.wdata = WtrackAPI.query(); // a list of objects displayed in my view

    $scope.addEntry = function() {   // adding an object to the list
        console.log("Adding Entry");
        var entry = {day: $scope.wdata.day, value: $scope.wdata.value};
        WtrackAPI.save(entry, 
                          function(){console.log("WTF do I need to do here to rerun WtrackAPI.query()");});
    };

}

私がやりたいのは、基本的に$scope.wdata = WtrackAPI.query();、save（）が完了したら、もう一度実行してモデルを更新することです。角度のある方法はただ$scope.wdata.push(entry)のことだと思いますが、この場合、データベースはトリガーを使用してエントリにデータを追加し、複雑な並べ替えを行うため、クエリを使用してリスト全体をラウンドトリップしてリロードしたいと思います。どうすればこれを実現できますか？$scope.wdata = WtrackAPI.query();$ scopeがそこに存在しないようであるため、saveコールバックを呼び出すだけでは機能しません。$emitや$rootScopeなどを使って他のいくつかのことを試しましたが、それだけで本当に混乱しました。だから、誰かが私にそれを行うための適切な方法についてのヒントを教えてもらえますか？

4

2 に答える 2

5

受け入れられた答えはあなたに一瞬空白のモデルのフラッシュを与えるでしょう。よりクリーンなモデルアップデートのためにこれをお勧めします： 

function ListCtrl($scope, $timeout, WtrackAPI){
        $scope.queryWData = function() {
            WtrackAPI.query(function(response){
                // set the wdata here, in the callback
                $scope.wdata = response;
            })
        };
        $scope.addEntry = function() {   // adding an object to the list
            console.log("Adding Entry");
            var entry = {day: $scope.wdata.day, value: $scope.wdata.value};
            WtrackAPI.save(entry,
                function(){
                    $scope.queryWData();
                });
        };
        $scope.queryWData();
    }

そのリソースが応答する前に、$ scope.wdataが空白になるため、完全に$scope.wdata等しく設定することはお勧めしません。$resourceこれにより、モデルが実際に更新される前に、空白のコンテンツが大量に点滅します。

これを修正するに$scope.wdataは、$resourceコールバックにを設定します

于 2015-09-04T06:47:24.013 に答える
4

$scopeオブジェクトはクロージャスコープでアクセス可能である必要があるため、次のように記述できます。

function ListCtrl($scope, $timeout, WtrackAPI){

    $scope.wdata = WtrackAPI.query(); // a list of objects displayed in my view

    $scope.addEntry = function() {   // adding an object to the list

        var entry = {day: $scope.wdata.day, value: $scope.wdata.value};
        WtrackAPI.save(entry, function() {
           //$scope should be accessible here
           $scope.wdata = WtrackAPI.query();
        });
    };
}
于 2012-12-07T17:46:26.313 に答える