Как программно обновить/обновить данные модели с сервера?

Фон

У меня есть самый простой вопрос "новичка" AngularJS, простите мое невежество: как обновить модель с помощью кода? Я уверен, что он ответил несколько раз, но я просто не мог Найди это. Я просмотрел несколько отличных видеороликов здесь http://egghead.io и быстро пошел по учебнику, но, тем не менее, я чувствую, что мне не хватает чего-то очень простого.

Я нашел один соответствующий пример здесь ($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?

Я уверен, что мне не хватает чего-то основного, но, потратив час, пытаясь понять это, я думаю, что он заслуживает вопроса. Пожалуйста, дайте мне знать, если он дублируется, и я закрою + ссылку на него.

ОТВЕТЫ

Ответ 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' });
};

Затем вы можете использовать это в своем представлении или что бы вы хотели сделать.

Ответ 2

Прежде чем я покажу вам, как программно обновлять/обновлять данные модели с сервера? Я должен объяснить вам концепцию привязки данных. Это чрезвычайно мощная концепция, которая действительно революционизирует то, как вы развиваетесь. Возможно, вам стоит прочитать эту концепцию из этой или this seconde link, чтобы не понимать, как работает AngularjS.

теперь я покажу вам пример, который exaplain, как вы можете обновить свою модель с сервера.

Код 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 и наша модель с именем: . перейдите к контроллеру 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() и когда мы получим результат от нашего ws, мы затронем его в нашей модели (строка X). Определите, что влияет на результаты для нашей модели, наш вид этого списка будет изменен с помощью новых данных.