如何以编程方式从服务器重新加载/刷新模型数据? [英] How to reload / refresh model data from the server programmatically?

问题描述

背景

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

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

这里是设置

controllers.js

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

index.html

<预><代码>...<div><ul ng-controller="PersonListCtrl"><li ng-repeat="person in person">姓名:{{person.name}}，年龄{{person.age}}

...

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

问题

1. 假设我想实现一个刷新按钮，我该如何告诉模型以编程方式重新加载?
2. 如何访问模型?似乎 Angular 正在神奇地实例化我的控制器的一个实例，但是我该如何着手呢?
3. EDIT 添加了第三个问题，与 #1 相同，但如何完全通过 JavaScript 完成?

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

解决方案

您已经成功了一半.要实现刷新，您只需将已有的内容包装在作用域的函数中:

function PersonListCtrl($scope, $http) {$scope.loadData = 函数 () {$http.get('/persons').success(function(data) {$scope.persons = 数据；});};//初始加载$scope.loadData();}

然后在您的标记中

<ul><li ng-repeat="person in person">姓名:{{person.name}}，年龄{{person.age}}<button ng-click="loadData()">刷新</button>

至于访问您的模型"，您需要做的就是访问控制器中的 $scope.persons 数组:

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

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

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

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.

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

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

1. Let's say I want to implement a refresh button, how do I tell the model to reload programmatically?
2. 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?
3. EDIT added a third question, same as #1 but how can it be done purely via 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.

解决方案

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:

for example (just puedo code) in your controller:

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

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

这篇关于如何以编程方式从服务器重新加载/刷新模型数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！