我有 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>
服务.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)...?
最佳答案
当您从index.html转到enter2.html时,整个页面从头开始加载。对于您希望保留在浏览器中的数据,您可能需要使用高级的 Angular 概念,例如使用 ng-view
仅加载页面的一部分。
如果您已经否决了这一点,请在卸载(window.onunload
事件)页面之前将数据保存在服务中的某个位置(可能是浏览器 session ),然后在以下情况下将其加载回来:服务加载(window.onload
事件)也可以工作。
关于javascript - 无法通过 2 个 html 文件之间的 Angular 服务传递参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37977947/