Javascript 无法通过angular service在2个html文件之间传递参数_Javascript_Html_Angularjs_Angular Services

Javascript 无法通过angular service在2个html文件之间传递参数

javascript html angularjs

Javascript 无法通过angular service在2个html文件之间传递参数,javascript,html,angularjs,angular-services,Javascript,Html,Angularjs,Angular Services,我有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&g

我有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中获得“hello world”，而是获得“hello”（服务找不到x）…？

听起来您需要在查看页面中使用控制器

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

ng view

仅加载页面的一部分

如果这是您已经否决的内容，请在卸载（

window.onunload

event）页面之前将数据保存在服务中的某个位置（可能是浏览器会话），然后在服务加载（

window.onload

event）时将其加载回该页面也可以工作。

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

ng view

仅加载页面的一部分

如果您已经否决了这一点，那么在卸载（

window.onunload

event）页面之前将数据保存在服务中的某个位置（可能是浏览器会话），然后在服务加载（

window.onload

event）时将其加载回该页面也可以工作。

这里是一个示例

我保留了您的index.html，并添加了ui视图，以拥有一个单页应用程序。该应用程序使用“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>




这里是一个例子
我保留了您的index.html，并添加了ui视图，以拥有一个单页应用程序。该应用程序使用“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>




不能将脚本放入角度模板中。此外，模板不应具有
或
或
。注意浏览器控制台中出现错误无法将脚本放入角度模板。此外，模板不应具有
或
或
。注意浏览器控制台中抛出的错误