調用函數或將數據傳遞給另一個控制器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>