【问题标题】:angularjs service confusionangularjs服务混乱
【发布时间】:2015-11-25 12:00:54
【问题描述】:

下面的元素在我的 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 () {

            });

});

【问题讨论】:

标签: javascript angularjs


【解决方案1】:

如果你想在两个控制器之间共享数据,你可以使用Service。服务是单例的,因此您可以轻松地共享您的数据。

但是,您希望在更改数据时通知您,因此,您应该使用$broadcast()$on() 方法。

  • $broadcast :将事件向下调度到所有子作用域

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

编辑

有使用Servicebroadcast参数的例子。

所以你可以这样做:

控制器

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

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

你可以看到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

【讨论】:

  • 也可以在没有服务的情况下使用广播。对吗?
  • 是的,您可以将数据作为$broadcast 方法的第二个参数传递。
  • 没有$broadcast你能做到吗?看看我的流程stackoverflow.com/questions/32312018/…
  • @AliceXu 我已经更新了代码和插件,现在你可以看到两个例子,使用不带参数的广播和服务,只带参数的广播。
  • 单例意味着给定对象的只有一个实例。我说所有的角度服务都是单身
猜你喜欢
  • 1970-01-01
  • 2015-12-13
  • 2014-03-04
  • 2021-07-26
  • 1970-01-01
  • 1970-01-01
  • 2011-02-07
  • 1970-01-01
  • 2013-02-22
相关资源
最近更新 更多