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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何从服务器以编程方式重新加载/刷新模型数据?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
背景

我有最基本的“新手”AngularJS问题,原谅我的无知:如何通过代码刷新模型?我确定它在几个地方回答多次,但我根本不能
找到它。
我在这里观看了一些伟大的视频http://egghead.io和迅速超过教程,但仍然我觉得我缺少一些非常基本的东西。

我发现一个相关的例子here($ 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完成呢?

我相信我缺少一些基本的东西,但花了一个小时试图弄清楚,我认为它值得一个问题。请让我知道如果它是重复的,我会关闭它的链接

你自己有一半的路。要实现刷新,你只需将你已经有的函数包装在作用域上:
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' });
};

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

原文链接:/angularjs/146726.html

猜你在找的Angularjs相关文章