Question

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

我在angular js app中有以下服务。

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

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

Answer 1

您的服务公开方法为getUri和setUri，但您尝试使用myservice.get()和myservic.set()。请查看以下代码段

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>

Answer 2

尝试以这种方式设置：

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

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

2 个答案: