在angularjs中的不同控制器之间交换数据？答案

【问题标题】：Exchanging data between different controllers in angularjs?在angularjs中的不同控制器之间交换数据？
【发布时间】：2016-03-12 02:48:37
【问题描述】：

我正在尝试在两个不同的控制器之间交换数据。我将访问不同控制器中的数据。我使用 /loading 来显示微调器。在不同页面之间导航时，我加载了这个微调器，经过一段时间的延迟，我导航到另一个预期的 url。所以我使用这个服务来存储 uri。

我的 Angular js 应用程序中有以下服务。

myApp.service('myService', function() {
    var data = "";
    return {
        getUri: function () {
            return data;
        },
        setUri: function (uri) {
            data = uri;
        }
    };
});

以下是我的路线：

twitter.config([ '$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider, $routeParams) {
        $routeProvider.when('/', {
            templateUrl : 'main.html',
            controller : 'mainController'
        }).when('/loading', {
            templateUrl : 'spinner.html',
            controller : 'spinnerController'
        }).when('/login', {
            templateUrl : 'login.html',
            controller : 'loginController'
        }).when('/signup', {
            templateUrl : 'signup.html',
            controller : 'signupController'
        });
        $locationProvider.html5Mode(true);
    } ]);

所以我试图通过这样做将数据放入服务中

myService.set('mydata');

获取数据

myService.get();

但是每次我尝试访问上面定义的不同控制器中的服务时，我都会得到空字符串。

【问题讨论】：

您能否添加您实际使用该服务的部分，以便我们了解哪些部分不起作用以及如何起作用？

标签： javascript angularjs

【解决方案1】：

您的服务公共方法是getUri 和setUri，但您正尝试使用myservice.get() 和myservic.set()。检查下面的sn-p

var myApp = angular.module('myApp', []);

myApp.controller('controller1', function($scope, myService) {
  $scope.ControllerData = 'From Controller 1';
  myService.setUri('www.google.com');

});

myApp.controller('controller2', function($scope, myService) {
  $scope.ControllerData = 'From Controller 2';
  $scope.sharedData = myService.getUri();

});


myApp.service('myService', function() {
  var data = "";
  return {
    getUri: function() {
      return data;
    },
    setUri: function(uri) {
      data = uri;
    }
  };
});

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>ng-click</title>
</head>

<body>

  <div ng-controller="controller1">
    Controller1 Data: {{ControllerData}}
  </div>
  <div ng-controller="controller2">
    Controller 2 Data:{{ControllerData}}
    <br>Shared Data :{{sharedData}}
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

尝试这样设置：

setUri: function (uri) {
    this.data = uri;
}

【讨论】：

似乎不起作用。当我在页面之间路由时，我相信总是会创建服务。