63

背景

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

我在这里找到了一个相关示例( $route.reload()) 但我不确定我是否理解如何在下面的示例中使用它

这是设置

控制器.js

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

索引.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 完成？

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

4

2 回答 2

72

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

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

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

于 2013-02-04T19:22:54.787 回答
2

在我向您展示如何以编程方式从服务器重新加载/刷新模型数据之前？我必须为您解释数据绑定的概念。这是一个非常强大的概念，将真正彻底改变您的开发方式。因此，您可能必须从此链接或第二个链接中阅读有关此概念的信息，以了解 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 以开发名为：的函数，当我们需要更新和刷新我们的模型peopleupdateData()时将调用该函数。

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()并且在此函数中，我们将通过该函数调用我们的 Web 服务$http.get()，当我们从 ws 获得结果时，我们将将它影响到我们的模型（第 X 行）。影响我们模型结果的骰子，我们对该列表的视图将使用新数据进行更改。

于 2015-05-31T16:52:42.897 回答