Question

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

这些是我的文件：

的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
    }

  });

为什么我得不到＆＃34;你好世界＆＃34;在enter2.html中，而是得到＆＃34;你好＆＃34; （服务未找到x）......？

Answer 1

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

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

Answer 2

这是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>

如果有帮助，请告诉我们。

其他信息：

Answer 3

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

无法通过2 html文件之间的角度服务传递参数

3 个答案: