Как сделать значение $ scope в другом обновлении контроллера при вызове функции внутри фабрики?

Question

У меня 2 контроллера, размещенных на одной странице и использующих одну и ту же фабрику.Все, что я хочу, - это когда функция в контроллере 1 выполняется, она вызывает функцию внутри фабрики, а затем $ scope в контроллере 2 обновляет свое значение.Когда страница загружена, контроллер может получить список, но после того, как контроллер 1 вызвал фабрику, ничего не изменилось, никаких обращений к серверу ...

Вот контроллер 1:

app.controller('controller1', function ($scope, $http, globalServices) {
  $scope.createFuntion = function(){
    $http.post(url, $.param(some_object)).then(function(response){
        //Handle something ...
        globalServices.userList();
    });
  }});

ЗдесьКонтроллер 2:

app.controller('controller2', function ($scope, $http, globalServices) {
$scope.users = globleServices.userList();});

Вот фабрика:

app.factory('globalServices', function ($http) {
return{
    userList: function(){
        var users_data = [];
        $http.get(url).then(function (response) {
            var res = response.data;
            if (res.status === 200) {
                angular.forEach(res.data, function (staff) {
                    users_data.push(staff);
                });
            } else {
                alert('Oops! Somethings went wrong!');
            }
        });
        return users_data;
    }
}});

Answer 1

В пространстве AngularJs и JavaScript есть элемент, называемый правилом точек.Если у вас есть свойство для объекта типа

service.data

, когда вы назначаете его другому объекту

$scope.data = service.data;

Он назначает ссылку на объект, и теперь, если вы обновите службу, контроллерне знает о новых данных.

Используя правило точки, вы можете иметь в службе объект, содержащий объекты данных

service.data = {};

этот объект никогда не должен изменять ссылку на новый объект ивсегда быть одним и тем же экземпляром, и вы можете добавить к нему новые свойства

service.data.userList = response.userList;

Теперь, если вы присваиваете данные в сервисе для области действия

$scope.data = service.data;

и в шаблоне используйте

<div ng-repeat="user in data.userList">{{ user.name }}</div>

Список пользователей будет обновляться, когда служба обновляет список пользователей.

Вы никогда не должны вводить $ http в контроллеры, вы должны только внедрять сервисы в контроллеры, и сервисы должны выполнять http-вызовы.Внедрение $ scope - это устаревший метод выполнения AngularJ, вы следуете устаревшим учебникам и должны изучить использование синтаксиса controllerAs или использовать компоненты, которые обертывают синтаксис controllerAs в стиле разработки Angular 2.

Answer 2

Создайте объект на своей фабрике, который будет каким-то образом служить состоянием, а затем создайте для него геттер.Разделите вашу функцию извлечения и getUserList.См. Модифицированный код ниже.

app.factory('globalServices', function ($http) {
  var list = {
     users_data: []
  }

  return{
    getUserList: getUserList,
    fetchUserList: fetchUserList
  }

  function getUserList() {
    return list;
  }

  function fetchUserList() {
        list.users_data = [];
        $http.get(url).then(function (response) {
            var res = response.data;
            if (res.status === 200) {
                angular.forEach(res.data, function (staff) {
                    list.users_data.push(staff);
                });
            } else {
                alert('Oops! Somethings went wrong!');
            }
        });
    }
});

Теперь в вашем контроллере1

app.controller('controller1', function ($scope, $http, globalServices) {
  $scope.createFuntion = function(){
    $http.post(url, $.param(some_object)).then(function(response){
        //Handle something ...
        globalServices.fetchUserList();
    });
  }});

и в вашем контроллере2

app.controller('controller2', function ($scope, $http, globalServices) {
   $scope.users = globleServices.getUserList();
});

Теперь ваш $scope.users слушает каждое изменениев вашем user_data.Доступ к массиву через $scope.users.users_data