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

Question

背景

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

我找到了一个相关示例here ($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. 假设我想实现一个刷新按钮，我如何告诉模型以编程方式重新加载？
2. 如何访问模型？看来 Angular 正在神奇地实例化我的控制器的一个实例，但我该如何掌握它呢？
3. EDIT 添加了第三个问题，与 #1 相同，但如何仅通过 JavaScript 完成？

我确定我错过了一些基本的东西，但是在花了一个小时试图弄清楚之后，我认为它值得一个问题。如果重复，请告诉我，我将关闭 + 链接。

Answer 1

你自己已经成功了一半。要实现刷新，您只需将已有的内容包装在范围内的函数中：

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

在我向您展示如何以编程方式从服务器重新加载/刷新模型数据之前？我必须为您解释数据绑定的概念。这是一个非常强大的概念，将真正彻底改变您的开发方式。因此，您可能必须从 link 或 this seconde link 中了解这个概念，才能了解 AngularjS 的工作原理。

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

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，我们的模型命名为：persons。转到您的 Controller js 以开发名为：updateData() 的函数，当我们需要更新和刷新我们的模型 persons 时将调用该函数。

Javascript 代码：

app.controller('adsController', function($log,$scope,...){

.....

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

});

现在我为您解释它是如何工作的： 当用户点击按钮 Refresh Data 时，服务器将调用函数 updateData() 并且在此函数中我们将通过函数$http.get() 调用我们的 Web 服务，当我们从我们的 ws 获得结果，我们会将其影响到我们的模型（第 X 行）。如果影响我们模型的结果的骰子，我们的列表视图将使用新数据进行更改。