Background

I have the most basic "newbie" AngularJS question, forgive my ignorance: how do I refresh the model via code? I'm sure it's answered multiple times somewhere, but I simply couldn't find it. I've watched some great videos here http://egghead.io and went quickly over the tutorial, but still I feel I'm missing something very basic.

我有一个最基本的“新手”问题，请原谅我的无知:我如何通过代码刷新模型?我肯定它在什么地方回答过很多次，但我就是找不到。我在这里看过一些很棒的视频http://egghead。io很快地复习了教程，但我还是觉得我遗漏了一些非常基本的东西。

I found one relevant example here ($route.reload()) but I'm not sure I understand how to use it in the example below

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

Here is the setup

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>
...

This all works amazingly well, each time the page is reloaded I see the list of people as expected

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

The questions

Let's say I want to implement a refresh button, how do I tell the model to reload programmatically?
假设我想实现一个refresh按钮，如何告诉模型以编程方式重新加载?
How can I access the model? it seems Angular is magically instantiating an instance of my controller, but how do I get my hands on it?
如何访问模型?它看起来是一个奇迹般地实例化了我的控制器的一个实例，但是我怎么才能得到它呢?
EDIT added a third question, same as #1 but how can it be done purely via JavaScript?
EDIT增加了第三个问题，和#1一样，但是如何通过JavaScript来完成呢?

I'm sure I'm missing something basic, but after spending an hour trying to figure it out, I think it deserves a question. Please let me know if it's duplicate and I'll close + link to it.

我肯定我漏掉了一些基本的东西，但在花了一个小时试图弄清楚它之后，我认为它值得被质疑。请让我知道它是否重复，我将关闭+链接到它。

2 个解决方案

#1

You're half way there on your own. To implement a refresh, you'd just wrap what you already have in a function on the scope:

你自己走了一半。要实现刷新，只需将您已经拥有的内容封装在范围上的函数中:

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

  //initial load
  $scope.loadData();
}

then in your markup

然后在你的标记

<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>

As far as "accessing your model", all you'd need to do is access that $scope.persons array in your controller:

至于“访问模型”，您需要做的就是访问这个$scope。控制器中的人员数组:

for example (just puedo code) in your controller:

例如(只是puedo代码)在你的控制器:

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

Then you could use that in your view or whatever you'd want to do.

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

#2

Before I show you how to reload / refresh model data from the server programmatically? I have to explain for you the concept of Data Binding. This is an extremely powerful concept that will truly revolutionize the way you develop. So may be you have to read about this concept from this link or this seconde link in order to unterstand how AngularjS work.

在我向您展示如何从服务器以编程方式重新加载/刷新模型数据之前?我必须向您解释数据绑定的概念。这是一个非常强大的概念，它将彻底改变你的发展方式。所以你可能需要从这个链接或第二个链接中了解这个概念，才能了解AngularjS的工作原理。

now I'll show you a sample example that exaplain how can you update your model from server.

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

HTML Code:

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>

So our controller named: PersonListCtrl and our Model named: persons. go to your Controller js in order to develop the function named: updateData() that will be invoked when we are need to update and refresh our Model persons.

我们的控制器命名为:PersonListCtrl和我们的模型命名为:persons。请访问您的Controller js，以开发名为:updateData()的函数，当我们需要更新和刷新模型人员时，将调用该函数。

Javascript Code:

Javascript代码:

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

.....

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

});

Now I explain for you how it work: when user click on button Refresh Data, the server will call to function updateData() and inside this function we will invoke our web service by the function $http.get() and when we have the result from our ws we will affect it to our model (Line X).Dice that affects the results for our model, our View of this list will be changed with new Data.

现在我为你解释它是如何工作的:当用户点击按钮刷新数据时,服务器将调用函数updateData()和在这个功能我们将调用web服务的功能http.get美元()和当我们已经从我们的结果ws将影响到我们的模型(X)行.Dice影响的结果我们的模型,我们认为这个列表将被改变的新数据。

#1