使用角度服务在 ng-view 的页面之间共享数据答案

【问题标题】：using angular service in order to share data between ng-view's pages使用角度服务在 ng-view 的页面之间共享数据
【发布时间】：2016-06-25 20:41:30
【问题描述】：

我正在尝试使用 Angular 构建单页 Web 应用程序。

我在下面有这 3 个文件：script.js、index.html 和 about.html。

我希望 about.html 使用服务，以便使用 Angular 服务更改共享值（到所有其他页面，即contact.html）。

我希望这个服务有一个可以通过所有页面访问的值（消息），一旦一个页面更改了这个值，所有其他页面都会知道这个新值......

由于某种原因，下面的代码对此不起作用...

为什么？

script.js

var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'SharedController'
  }) 
  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'SharedController'
  })
  .when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'SharedController'
  });
});

scotchApp.factory('myService', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 } 
 function get() {
  return savedData;
}

return {
  set: set,
  get: get
}

});

scotchApp.controller('SharedController', ['$scope', 'myService', function($scope, myService) { 
  myService.set('hello');
  $scope.message = myService.get();
}]);

index.html

 <!DOCTYPE html>
 <html>
 <head>

  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
  </script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

  <ul>
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
  </ul>

  <div ng-app="scotchApp" ng-view>
  </div>

</body>
</html>

和about.html

<div class="jumbotron text-center">
    <h1>old value</h1>
    <script type="text/javascript">
        myService.set('hello');
        $scope.message = myService.get();
    </script>
    <p>{{ message }}</p>
</div>

我

【问题讨论】：

这就是我类似的实现方式：mattharris.org/2016/02/…
查看相关StackOverflow answer

标签： javascript html angularjs angular-ui-router

【解决方案1】：

编辑 1：据我所知，您不能直接从视图中使用服务。你必须通过控制器。当您希望用户通过 ng click 选择一个值时，我会执行以下操作：

关于.html：

<div class="jumbotron text-center">
  <h1>old value</h1>
  <p>{{ message }}</p>
  <button type="button" ng-click="updateMsg('I am in about')">Click Me</button>
</div>

控制器：

scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) { 


  $scope.updateMsg = function (msg) {
    myService.set(msg);
    $scope.message = myService.get();
  }

}]);

原文：

我建议为每个页面制作不同的控制器。但是，您应该注意并且不起作用的一件事是您在 about.html 中的 javascript 访问 myService ，因为 Angular 不知道/注入服务。你可以做的是：

scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) { 

  myService.set('About');
  $scope.message = myService.get();

}]);

您的路线将更改为：

.when('/about', {
  templateUrl : 'pages/about.html',
  controller  : 'AboutController'
})

和about.html：

<div class="jumbotron text-center">
  <h1>old value</h1>
  <p>{{ message }}</p>
</div>

【讨论】：

谢谢。以前试过。问题是我希望用户通过 ng form 和 ng click 选择一个值...这就是为什么我不想在控制器中使用此服务但在视图本身中使用...