Question

我对Angularjs很新，并且在解决如何更新我从JSON创建的$ scope元素时遇到了问题。基本上我有一个包含抓取JSON的函数的服务：

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

然后我有一个Controller，其中包含一个函数，该函数在按钮点击时获取JSON数据并将其放入$ scope.data和第二个函数，我想用它来更新$ scope.data：

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以便：

实际更新
更新会反映在我的视图中

我试过$ broadcast，$ scope.data.push，$ scope.data.posts.push。这些要么没有工作，要么没有错误。我确信这可能是一个简单的答案，但我觉得我可能对Angularjs和JSON没有经验可以接受它。提前谢谢。

Answer 1

所以我认为上面的代码存在一些问题。希望这可以帮助你理顺它：

$ http.get（）函数返回“promise”。 Promise有一个你正在使用的then（）函数，但你可能应该调整以获取返回的数据并将其直接放入$ scope。在服务中的then（）内部执行“return”语句实际上没有任何地方可以去，因为请求是异步的。 Angular知道如何使用promises，因此您可以绑定到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>

Answer 2

实际上，虽然上面的代码是正确的，但在这种情况下，getJSON函数实际上并未在任何地方调用，因此永远不会填充$ scope.data。

Angularjs - 更新JSON

2 个答案: