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

Question

背景

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

我在这里找到了一个相关的例子($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. 编辑添加了第三个问题,与#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' });
};

然后你可以在你的视图或任何你想做的事情中使用它.