背景

Question

背景

我有最基本的“新手”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神奇地实例化了我的控制器的一个实例，但是我如何得到它呢？
编辑添加了第三个问题，与＃1相同，但如何才能完全通过JavaScript完成？

我确定我错过了一些基本的东西，但在花了一个小时试图解决之后，我觉得值得一提。如果它重复，请告诉我，我会关闭+链接到它。

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

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

Answer 2

在我向您展示如何以编程方式从服务器重新加载/刷新模型数据之前？我必须为您解释数据绑定的概念。这是一个非常强大的概念，将真正彻底改变您的发展方式。因此，您可能必须从此link或this seconde link了解此概念，以便了解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 ，我们的模型命名为：人。转到您的Controller js以开发名为updateData()的函数，当我们需要更新和刷新模型人时，将调用该函数。

Javascript代码：

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

.....

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

});

现在我向你解释它是如何工作的：当用户点击按钮刷新数据时，服务器将调用函数 updateData（），在此函数中，我们将通过函数$http.get()调用我们的Web服务，当我们得到ws的结果时，我们会将它影响到我们的模型（第X行）。影响我们模型结果的因素，我们对此列表的视图将随新数据而改变。

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

背景

这是设置

controllers.js

的index.html

问题

2 个答案: