angularjs service confusion

2018-06-27 18:02:47

Below element is within my mainController

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

and I can't alter using $scope.done_ajax because my ajax is done in another controller. How can I communicate between mainController and my controller2?

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

});

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

            $scope.$apply(function () {

            });

});

If you want to share data between two controllers, you can use Service . Service are singletons, so you can easily share your data.

However, you want to notify when you have changed your data, so to achieve this, you should use the $broadcast() and $on() method.

$broadcast : dispatches the event downwards to all child scopes

As there is no parent-child relation between your scopes, if your controllers are at the same level, you can inject $rootScope into the controller and broadcast the event to all child scopes.

EDIT

there is example by using Service and broadcast parameter.

So you can do :

Controller

(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);

})();

Service

(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>

Now, you will be able to communicate between differents controllers, and retrieve data by using Service.

You can see the Plunker

Just by using Service singleton

Controller

(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>

Here, we just share the instance of our Service.

You can see the Plunker with Service

链接地址: http://www.djcxy.com/p/77568.html

上一篇: 如何在angularjs中的单个模板中调用多个控制器？

下一篇: angularjs服务混乱