一尘不染

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

angularjs

背景

我有最基本的“新手”
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>
...

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

问题

假设我要实现一个刷新按钮，如何告诉模型以编程方式重新加载？
如何访问模型？看来Angular神奇地实例化了我的控制器的实例，但是我该如何使用它呢？
EDIT 添加了第三个问题，与＃1相同，但是如何仅通过JavaScript完成呢？

我确定我缺少一些基本的知识，但是花了一个小时试图弄清楚之后，我认为这是一个问题。请让我知道它是否重复，我将关闭+链接。

阅读 249

2020-07-04

共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' });
};

然后，您可以在自己的视图中使用它，也可以随便使用它。

2020-07-04