我正在学习Angular，所以我可以进入Web应用程序开发。我正在做一个测试项目，但 angularjs 表达式不起作用： 这是我的文件夹结构：
WebContent
--css
----indexc.css
----w3.css
--js
----script.js
--pages
----home.html
----yourstory.html
----story.html
--index.html
我的索引.html是 -
<!DOCTYPE html>
<html ng-app="publicStory">
<head>
<meta charset="ISO-8859-1">
<title>Dil Ki Bhadas</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="js/script.js"></script>
</head>
<body ng-controller="homeController">
<!-- Menu Start -->
<div class="container">
<ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
<li><a class="active" href="#" ng-click="getHomeData()">Home</a></li>
<li><a href="#yourstory" ng-click="getYourStories()">YOUR STORY</a></li>
</ul>
</div>
<!-- Menu End -->
<div id="main" class="w3-container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
我的剧本.js是——
// create the module and name it scotchApp
var storyApp = angular.module('publicStory', ['ngRoute']);
// configure our routes
storyApp.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/Home.html',
controller : 'homeController'
})
// route for the your story page
.when('/yourstory', {
templateUrl : 'pages/yourstory.html',
controller : 'homeController'
})
// route for the Sign UP page
.when('/story', {
templateUrl : 'pages/story.html',
controller : 'homeController'
});
});
// create the controller and inject Angular's $scope
storyApp.controller('homeController', function($scope, $http, $location) {
console.log('home Controller');
$scope.yourStory = {};
/*
* Get Home Data
*/
$scope.getHomeData = function() {
console.log("In getHomeData");
$http({
method : 'POST',
url : 'homeData',
data : angular.toJson($scope.userform),
headers : {
'Content-Type' : 'application/json'
}
}).then(function(response) {
alert("Got response for getHomeData");
console.log(response.data);
$scope.eyb = response.data;
});
};
/*
* Get Your Story
*/
$scope.getYourStories = function() {
console.log('In getYourStories');
$scope.yourStory.action = 'fetchAllStory';
$scope.yourStory.id = -1;
console.log($scope.yourStory);
$http({
method : 'POST',
url : 'yourStory',
data : angular.toJson($scope.yourStory),
headers : {
'Content-Type' : 'application/json'
}
}).then(function(response) {
alert("Got response for getYourStories");
console.log(response.data);
$scope.yourStories = response.data;
$scope.flag = false;
});
};
$scope.getYourStoryById = function(Id) {
console.log('In getYourStoryById');
$scope.yourStory.id = Id;
$scope.yourStory.action = 'getStoryById';
console.log($scope.yourStory);
$http({
method : 'POST',
url : 'yourStory',
data : angular.toJson($scope.yourStory),
headers : {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(response) {
alert("Got response for getYourStoryById");
console.log(response.data);
$scope.yourStoryById = response.data;
console.log($scope.yourStoryById);
$location.path('/story');
});
};
});
我的故事.html是——
<div class="w3-container">
<div class="storyList" ng-hide="flag">
<div id="side-nav">
<img src="images/yourStory.jpg" alt="Trolltunga Norway" width="300">
</div>
<div id="content-wrapper">
<button class="w3-btn w3-blue" ng-hide="flag" ng-click="flag = true">Write Your Story</button>
<table>
<tr ng-repeat="yourStory in yourStories">
<!-- <td>{{ yourStory.id }}</td> -->
<td>{{ yourStory.writerName }}
</p>
<a href="#story" ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>
<!-- <td>{{ yourStory.writerEmail }}</td>
<td>{{ yourStory.storyTitle }}</td> -->
</tr>
</table>
</div>
</div>
</div>
而故事.html是——
<div class="w3-container">
<h1>Hello Story Page</h1>
<table>
<tr>
<td>{{ yourStoryById.writerName }}</td>
</p>
<td>{{ yourStoryById.writerEmail }}</td>
</p>
<td>{{ yourStoryById.storyTitle }}</td>
</p>
<td>{{ yourStoryById.story }}</td>
</tr>
</table>
</div>
当用户单击页面#story链接yourstory.html时，它会调用getYourStoryById()函数并从后端获取数据。我能够使用此方法从后端获取数据，并能够在$scope.yourStoryById = response.data;中设置此数据。
我的问题是当控制权要story.html($location.path('/story'((时，我只能看到"Hello Story Page"，而看不到来自$scope.yourStoryById的其他数据。
这可能是因为当您切换路由时，angular 会创建homeController的新实例，因此您在一个页面上有权访问的范围与您在其他页面上可以访问的范围不同。
若要共享数据，已在控制器的一个实例中检索到数据，可以使用所有控制器使用服务。由于服务是单例的，因此每次注入服务时，它们将始终返回相同的实例。
有很多关于使用服务的资源，所以你的AngularJS教育的下一个自然步骤是查找服务是如何工作的。
为了帮助您入门，下面是您可能创建的服务示例：
angular.module('publicStory').service('myStoryService', myStoryService);
function myStoryService($http){
// Public functions
this.getYourStoryById = getYourStoryById;
// Implementation
function getYourStoryById (yourStory) {
return $http({
method : 'POST',
url : 'yourStory',
data : angular.toJson(yourStory),
headers : {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(response) {
alert("Got response for getYourStoryById");
console.log(response.data);
return response.data;
});
}
}