如何以编程方式从服务器重新加载/刷新模型数据？

背景

我有最基本的“新手”AngularJS问题，原谅我的无知：如何通过代码刷新模型？ 我确定它在某个地方被多次回答，但我根本找不到它。 我在这里看过一些很棒的videohttp://egghead.io，并且很快就通过了这个教程，但是我仍然觉得我错过了一些非常基本的东西。

我在这里find了一个相关的例子（ $route.reload() ），但我不确定如何在下面的例子中使用它

这是设置

controllers.js

 function PersonListCtrl($scope, $http) { $http.get('/persons').success(function(data) { $scope.persons = data; }); } 

的index.html

 ... <div> <ul ng-controller="PersonListCtrl"> <li ng-repeat="person in persons"> Name: {{person.name}}, Age {{person.age}} </li> </ul> </div> ... 

这一切都非常好，每当页面重新加载时，我都会看到预期的人员列表

问题

1. 比方说，我想实现一个刷新button，我如何告诉模型以编程方式重新加载？
2. 我怎样才能访问模型？ 看来Angular神奇地实例化了我的控制器的一个实例，但是我怎么把它放在手上呢？
3. 编辑添加了第三个问题，与＃1相同，但它怎么可以纯粹通过JavaScript？

我确定我错过了一些基本的东西，但花了一个小时试图找出它，我认为这是值得一个问题。 请让我知道，如果它是重复的，我会closures+链接到它。

Answer 1

你自己的一半。 要实现一个刷新，你只需要将你已经有的function包装在范围中：

 function PersonListCtrl($scope, $http) { $scope.loadData = function () { $http.get('/persons').success(function(data) { $scope.persons = data; }); }; //initial load $scope.loadData(); } 

然后在你的标记

 <div ng-controller="PersonListCtrl"> <ul> <li ng-repeat="person in persons"> Name: {{person.name}}, Age {{person.age}} </li> </ul> <button ng-click="loadData()">Refresh</button> </div> 

至于“访问你的模型”，你需要做的就是访问你的控制器中的$ scope.persons数组：

例如（只是puedo代码）在你的控制器：

 $scope.addPerson = function() { $scope.persons.push({ name: 'Test Monkey' }); }; 

那么你可以在你的视图中使用它，或者你想要做的任何事情。

Answer 2

在演示之前，如何以编程方式从服务器重新加载/刷新模型数据？ 我必须为你解释数据绑定的概念。 这是一个非常强大的概念，将真正彻底改变你的发展方式。 所以也许你必须从这个链接或这个seconde链接阅读这个概念，以便了解AngularjS是如何工作的。

现在我将向您展示一个示例，exaplain如何从服务器更新模型。

HTML代码：

 <div ng-controller="PersonListCtrl"> <ul> <li ng-repeat="person in persons"> Name: {{person.name}}, Age {{person.age}} </li> </ul> <button ng-click="updateData()">Refresh Data</button> </div> 

所以我们的控制器名为： PersonListCtrl和我们的Model名为： 个人 。 去你的控制器js，以开发名为updateData()的函数，当我们需要更新和刷新我们的模型人员时将调用它。

Javascript代码：

 app.controller('adsController', function($log,$scope,...){ ..... $scope.updateData = function(){ $http.get('/persons').success(function(data) { $scope.persons = data;// Update Model-- Line X }); } }); 

现在我向你解释它是如何工作的：当用户点击button刷新数据时 ，服务器将调用函数updateData（） ，在函数内部，我们将通过函数$http.get()来调用我们的web服务，从我们的ws结果，我们将影响到我们的模型（X线）。影响我们的模型的结果，我们的这个列表视图将改变与新的数据。