Question

元素下面是我的mainController

<img src="loader.gif" ng-hide="done_ajax"/>

我无法使用$ scope.done_ajax进行更改，因为我的ajax是在另一个控制器中完成的。如何在mainController和我的controller2之间进行通信？

app.service('finished_request', function(){

});

callAPI("getUser", {
            method: "GET"
        }).done(function (resp) {

            $scope.$apply(function () {

            });

});

Answer 1

如果要在两个控制器之间共享数据，可以使用服务。服务是单身，因此您可以轻松共享您的数据。

但是，您希望在更改数据时通知，因此要实现此目的，您应该使用$broadcast()和$on()方法。

$broadcast：将事件向下调度到所有子范围

由于您的范围之间没有父子关系，如果您的控制器处于同一级别，您可以将$rootScope注入控制器并将事件广播到所有子范围。

修改

有使用服务和广播参数的示例。

所以你可以这样做：

<强>控制器

(function(){ function Controller($scope, $rootScope, Service) { $scope.data = 1; $scope.set = function(n){ $scope.data = n; Service.set($scope.data); $rootScope.$broadcast('set', $scope.data); } } angular .module('app', []) .controller('ctrl', Controller); })(); (function(){ function Controller($scope, Service) { $scope.$on('set', function(e, data){ $scope.data2 = Service.get(); $scope.data3 = data; }); } angular .module('app') .controller('ctrl2', Controller); })();

<强>服务

(function(){ function Service(){ var data; function get(){ return data; } function set(value){ data = value; } return { get: get, set: set }; } angular .module('app') .factory('Service', Service); })();

<强> HTML

<body ng-app='app'> <h3>Controller 1</h3> <div ng-controller="ctrl"> <button ng-click="set(data)">change</button> <input type="text" ng-model="data"> </div> <h3>Controller 2</h3> <div ng-controller="ctrl2"> <p>Data from controller 1 : {{data2}}</p> <p>Data from controller 1 without service : {{data3}}</p> </div> </body>

现在，您将能够在不同的控制器之间进行通信，并使用服务检索数据。

您可以看到Plunker

仅使用服务单例

<强>控制器

(function(){ function Controller($scope, Service) { $scope.data = 1; $scope.set = function(n){ Service.set(n) } } angular .module('app', []) .controller('ctrl', Controller); })(); (function(){ function Controller($scope, Service) { //Retrieve service instance $scope.data_service = Service; } angular .module('app') .controller('ctrl2', Controller); })();

<强> HTML

<body ng-app='app'> <h3>Controller 1</h3> <div ng-controller="ctrl"> <button ng-click="set(data)">change</button> <input type="text" ng-model="data"> </div> <h3>Controller 2</h3> <div ng-controller="ctrl2"> <p>Data from controller 1 : {{data_service.get()}}</p> </div> </body>

在这里，我们只是分享我们服务的实例。

您可以看到Plunker with Service

angularjs服务混乱

1 个答案: