无法通过 angular 服务在 2 html 文件之间传递参数

Question

我有 2 个 html 文件，我想通过 angular 服务在它们之间传递参数。

这些是我的文件：

index.html

<html>
<head>

  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<body>
<script type="text/javascript" src="services.js"></script>
 <div ng-app="myApp" ng-controller="myCtrl2">

 </div>
    <a href="enter2.html">enter here</a>
 <script>
  var app=angular.module("myApp");
  app.controller("myCtrl2", ['$scope','$location', 'myService', 
    function($scope, $location, myService) {
    myService.set("world");
  }]);
</script>
</body>
</html>

enter2.html

<html>
<head>

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<body>
    <script type="text/javascript" src="services.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl3">
        hello {{x}} 

    </div><script type="text/javascript">
    var app=angular.module("myApp");
    app.controller("myCtrl3", ['$scope','$location', 'myService', 
        function($scope, $location, myService) {

            $scope.x=myService.get();
        }]);

    </script>

</body>
</html>

services.js

    var app=angular.module("myApp", []);
    app.factory('myService', function() {
     var savedData = {}
     function set(data) {
       savedData = data;
     } 
     function get() {
      return savedData;
    }

    return {
      set: set,
      get: get
    }

  });

为什么我无法在 enter2.html 中获取 "hello world"，而是获取 "hello"（服务未找到 x）...？

Answer 1

听起来您需要为视图页面使用控制器 https://docs.angularjs.org/guide/controller

Answer 2

当您从 index.html 转到 enter2.html 时，整个页面会从头开始加载。对于您希望保留在浏览器中的数据，您可能需要使用高级 angular 概念，例如使用 ng-view.

仅加载页面的一部分

如果您已经否决了这一点，请在卸载（window.onunload 事件）页面之前将数据保存在服务中的某处（可能是浏览器会话），然后在服务加载时从那里加载回来（window.onload 事件）也可以。

Answer 3

这里是working example based on your code.

我保留了您的 index.html 并添加了 ui-view 以获得单页应用程序。该应用使用 'ui.router'.

在myCtrl2中我将数据保存在服务中，并从myCtrl3中调用：

 .controller('myCtrl2', ['$scope', 'myService', function($scope, myService) {
    console.log('myCtrl2');
    myService.set('world');
  }])
  .controller('myCtrl3', ['myService', function(myService) {
    console.log('myCtrl3');
    var vm = this;
    vm.x = myService.get();
  }])

为简单起见，我有一个 Javascript 文件：

angular.module('myApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'index.html',
      controller: 'myCtrl2',
      controllerAs: 'vm'
    })

    .state('enter2', {
      url: '/enter2',
      templateUrl: 'enter2.html',
      controller: 'myCtrl3',
      controllerAs: 'vm'
    });

  })
  .factory('myService', function() {
    var savedData = {}

    function set(data) {
      savedData = data;
    }

    function get() {
      return savedData;
    }

    return {
      set: set,
      get: get
    }

  })
  .controller('myCtrl2', ['$scope', 'myService', function($scope, myService) {
    console.log('myCtrl2');
    myService.set('world');
  }])
  .controller('myCtrl3', ['myService', function(myService) {
    console.log('myCtrl3');
    var vm = this;
    vm.x = myService.get();
  }])

我也经常推荐使用 var vm=this 和 ControllerAs 来避免 $scope 问题。

index.html 如下所示...请注意 ui-sref 而不是 href:

 <div ui-view="">
    <a ui-sref="enter2">Enter here</a>
  </div>

enter2.html 现在只是 div 部分和您的内容：

<div>
  Hello {{ vm.x }}
</div>

如果有帮助请告诉我们。

附加信息：

无法通过 angular 服务在 2 html 文件之间传递参数

cannot pass parameters via angular service between 2 html file

html

javascript

angularjs

angular-services