Question

我有2个控制器放在同一页面上，并且使用同一工厂。我想要的是在控制器1中的函数执行时，它将调用工厂内部的函数，然后控制器2中的$ scope将更新其值。加载页面后，控制器可以获取列表，但是在控制器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是执行AngularJs的一种过时方法，您正在阅读过时的教程，应该研究使用controllerAs语法或使用以Angular 2开发风格包装controllerA语法的组件。

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

现在在您的控制器中

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

访问数组

在工厂内部调用函数时，如何在另一个控制器中更新$ scope值？

2 个答案: