4

私は Angularjs を初めて使用し、JSON から作成した $scope 要素を更新する方法を理解するのに問題があります。基本的に、JSON を取得する関数を含むサービスがあります。

app.service('JSONService', function($http){         
    return{
        getJSON: function(){
            return $http.get('posts.json')
                .then(function(response){
                    return response.data;
                });
        }
    };
 });

次に、ボタンのクリックで JSON データを取得し、それを $scope.data に入れる関数と、$scope.data を更新するために使用する 2 つ目の関数を含むコントローラーがあります。

app.controller('PostController', function PostController($scope, JSONService){
    $scope.data;

    $scope.getJSON = function(){            
        $scope.data = JSONService.getJSON();
    };
    $scope.addPost = function(){
        // Add to $scope.data
    };
});

現在、JSONデータを正常に取得し、それを使用してビューの側面を設定できますが、次のように $scope.data を更新する方法に行き詰まっています:

  1. 実際に更新します
  2. ビューに更新が反映されました

$broadcast、$scope.data.push、$scope.data.posts.push を試しました。これらは完全に機能していないか、エラーが発生しています。簡単な答えかもしれませんが、Angularjs と JSON に慣れていないのではないかと思います。前もって感謝します。

4

2 に答える 2

3

したがって、上記のコードにはいくつかの問題があると思います。うまくいけば、これはあなたがそれをまっすぐにするのに役立つでしょう:

$http.get() 関数は「約束」を返します。Promise には、使用している then() 関数がありますが、返されたデータを取得して $scope に直接入れるように調整する必要があります。サービスの then() 内で「return」ステートメントを実行しても、リクエストが非同期であるため、その時点でどこにも行くことができません。Angular は promise の操作方法を知っているため、UI でデータにバインドできますが、実際には $scope.data の直下でデータを見つけることはできません。$scope.data は引き続き promise オブジェクトであり、データは別のプロパティになります ($scope.data.promiseData のようなものですが、プロパティが何であるかを正確に覚えていません)。次のように調整できます。

app.service('JSONService', function($http){         
    return {
        getJSON: function() {
            return $http.get('posts.json');
        }
    };
})

コントローラ：

app.controller('PostController', function PostController($scope, JSONService){
    $scope.data;

    $scope.getJSON = function(){            
        JSONService.getJSON()
            .then(function (response) {
                $scope.data = response.data;
            });
    };
    $scope.addPost = function(postText){
        // Add to $scope.data (assuming it's an array of objects)
        $scope.data.push({postText: postText});
    };
});

HTML:

<div data-ng-repeat="post in data">{{post.postText}}</div>

<input type="text" ng-model="newPostText">
<button type="button" ng-click="addPost(newPostText)">Add Post</button>
于 2013-03-12T20:06:20.353 に答える
0

実際、上記のコードは正しいのですが、この場合、getJSON 関数は実際にはどこでも呼び出されないため、$scope.data は読み込まれません。

于 2014-03-14T13:07:20.440 に答える