调用函数或将数据传递给另一个控制器AngularJS

Question

我已经有了这类问题的其他主题，但没有人可以帮助我...所以这是我的问题：

我有一个带有搜索按钮的导航栏，这个按钮从Web服务获取并获取请求，并返回一个必须应用于填充表列表的json对象。 问题是，我的按钮和我的表位于独立的控制器中，它确实像我预期的那样工作。

var app = angular.module('clientRest', []).controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
    $scope.contatos = loadLista.getContatos();
}]).controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
    $scope.listar = function() {
        $http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
            loadLista.setContatos(response);
        });
    };
}]).service('loadLista', function() {
    var contatos = [];
    return {
        getContatos: function() {
            return contatos;
        },
        setContatos: function(c) {
            contatos = c;
        }
    };
});

我的代码......当我从pesquisa控制器调用listar() ，我需要将接收到的数据从lista控制器发送到$ scope.contatos以使我的ng-repeat工作，只需单击一下即可完成所有操作。

我该怎么做？

感谢大家

Answer 1

最好使用服务在两个控制器/模块之间共享数据，因为这可能是最好的方法。 您可以参考下面给出的代码段来理解这个概念。

angular.module('app.A', [])
.service('ServiceA', function() {
    this.getValue = function() {
        return this.myValue;
    };

    this.setValue = function(newValue) {
        this.myValue = newValue;
    }
});

angular.module('app.B', ['app.A'])
.service('ServiceB', function(ServiceA) {
    this.getValue = function() {
        return ServiceA.getValue();
    };

    this.setValue = function() {
        ServiceA.setValue('New value');
    }
});

为了触发数据接收事件，您可以使用

1. 广播/发送消息 - 使用@broadcast / @emit
2. 带回调的角度承诺

3. 控制器启动功能，用于从服务重新加载先前读取的信息

   .controller('MyController', function($scope, ServiceA) { $scope.init = function() { $scope.myValue = ServiceA.getValue(); }; // Call the function to initialize during Controller instantiation $scope.init(); });

Answer 2

使用$ rootScope。$ emit在设置变量时发出更改事件，并使用$ on获取lista控制器中的值。 我在这里使用customListAr来演示按钮点击。 这有帮助吗？

 var app = angular.module('clientRest', []) .controller('lista', ['$scope', 'loadLista', '$rootScope', function($scope, loadLista, $rootScope) { console.log(loadLista); $scope.contatos = loadLista.getContatos(); $rootScope.$on('change', function() { $scope.contatos = loadLista.getContatos(); }); } ]) .controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) { $scope.listar = function() { $http.get("http://localhost/wsRest/index.php/contato").success(function(response) { loadLista.setContatos(response); }); }; $scope.customListAr = function() { loadLista.setContatos(["item 1" , "item 2", "item 3"]); } } ]) .service('loadLista', ['$rootScope', function($rootScope) { var contatos = []; return { getContatos: function() { return contatos; }, setContatos: function(c) { contatos = c; $rootScope.$emit('change'); } }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="clientRest"> <div ng-controller="lista"> <ul> <li ng-repeat="a in contatos">{{a}}</li> </ul> </div> <div ng-controller="pesquisa"> <button ng-click="customListAr()">Click Me</button> </div> </div> 

Answer 3

你的问题是当你做$ scope.contatos = loadLista.getContatos（）; 您正在设置静态值，而angular无法有效地为该对象创建观察程序，因为您的setContatos方法每次都在创建一个新对象。 要解决这个问题，让控制器的作用域保存对父对象的引用，然后它将自动在该对象上有一个观察者。

var app = angular.module('clientRest', [])
    .controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
        $scope.contatos = loadLista.contatos;
    }])
    .controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
        $scope.listar = function() {
            $http.get("http://localhost/wsRest/index.php/contato"
            ).success(function (response) {
                loadLista.contatos.data = response;
            });
        };
    }])
    .service('loadLista', function() {
        var lista = {
            contatos: {},
        };
        return lista;
    });

// view:

<ul>
  <li ng-repeat="contato in contatos.data">
    {{ contato }}
  </li>
</ul>