Question

我想分享我的服务数据b / w两个控制器，我的控制器是独立的。我怎样才能做到这一点？

这是我的服务：

angular.module("myApp").service('emt', function($http,$rootScope) 
{
    this.value1 = "";
    this.value2 = "";
});

这是我的第一个控制器：

angular.module('myApp').controller('emitCtrl', function($scope,emt,$modal,$rootScope){
    $scope.user=emt;
    $scope.myArray=[];
    $scope.send=function(user){  
        $scope.myArray.push({value1:$scope.user.value1,value2:$scope.user.value2});
        console.log($scope.user);
        $scope.user.value1="";
        $scope.user.value2="";


        //firing an event towords upword direction using emit.
        $rootScope.$emit('myEmitEvent', 'emt');  //  emt is the name of service.
        };

        //modeal for show emit data
        $scope.open=function(){
            alert("hello its emit !");
            $modal.open({
                templateUrl: '../../../view/emitPageModal.html',
                controller: 'myEventCtrl'
            });

        };

    });

这是我的第二个控制器：

angular.module('myApp').controller('myEventCtrl', function($scope,emt,$modalInstance,$rootScope){
    $scope.demo=false;
    $scope.ok = function () {
        $scope.demo=true;
        $modalInstance.close();
    };

    $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

// for catching an  event raised by emit 
$rootScope.$on('myEmitEvent', function (event, data) {
    $scope.myemitedData=data.emt;
    console.log(data.emt); 
    console.log($scope.myemitedData);
    // 'Some data'

    });
});

这是我的模态：

<div class="modal-header" ng-hide="demo">
    <h4>Modal Dialog</h4>
</div>
<div class="modal-body">
    <p>Example paragraph with some text.</p>

    <p>Your name is :{{user.value1}}</p>
    <p>Your number is :{{user.value2}}</p>
</div>
<div class="modal-footer">
    <button class="btn btn-success" ng-click="ok()">Okay</button>
    <button class="btn" ng-click="cancel()">Cancel</button>
</div>

Answer 1

您只想在第一个控制器（emitCtrl）内的emit服务中设置值。将该服务（发出）注入第二个控制器（myEventCtrl）后，您可以使用emit服务获取在第一个控制器中设置的值。无需使用 $ emit 服务。我附上了一个示例代码，只是得到一个想法。

angular.module("myApp").service('emt', function($http, $rootScope) {
  this.value1 = "";
  this.value2 = "";
});


angular.module('myApp').controller('emitCtrl', function($scope, emt, $modal, $rootScope) {

  /*Sample code to set value in first controller*/
  emt.value1 = "my value1"
  emt.value2 = "my value2"

});

angular.module('myApp').controller('myEventCtrl', function($scope, emt, $modalInstance, $rootScope) {
  /* You can access the value of value1 and value2 inside second controller using emt service*/

  var myVal1 = emt.value1;
  var myVal2 = emt.value2
});

Answer 2

服务只是可以共享的实体。这些可以有复杂的对象，功能等。为了共享它们，服务必须返回它们如下：

      angular.module("myApp").service('emt', function($http, $rootScope) {
      var myObj = {
        value1: "",
        value2: ""
      }
      var func = function(){
       console.log('test')
}
      return {
        obj: myObj,
        publicFun : func
      }
    });

现在变量myObj将在注入emt的任何地方可用。

angular.module('myApp').controller('emitCtrl', function($scope,emt,$modal,$rootScope){
     $scope.user=emt.obj;
});

此emt.obj将始终在共享的任何控制器中具有最新值。

Answer 3

您可以在任何想要使用的控制器中使用服务和注入。除角度为$ scope之外的所有服务都是单例。

示例测试用例

＆＃13;

.element {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

＆＃13;

angular.module("Test", [])
  .service('shared', function() {
    this.user = "Dev";
    this.age = "25";

    this.setData = function(data) {
      this.user = data.user;
      this.age = data.age;
    }
    this.getData = function() {
      return {
        user: this.user,
        age: this.age
      }
    }
  })
  .controller("ctr1", function($scope, shared) {
    this.data = shared.getData();
    shared.setData({
      user: "John",
      age: 25
    });
  })
  .controller("ctr2", function($scope, shared) {
    this.data = shared.getData();
  })

＆＃13;

使用$ emit共享服务数据b / w两个独立控制器

3 个答案: