1
我正在學習Angular，所以我可以進入Web應用程序開發。我在做一個試驗項目，但angularjs表達不工作： 這裏是我的文件夾結構：AngularJS表達式不起作用
WebContent
--css
----indexc.css
----w3.css
--js
----script.js
--pages
----home.html
----yourstory.html
----story.html
--index.html
我的index.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>
我的script.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');
});
};
});
我yourstory.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>
和story.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>
當用戶點擊在yourstory.html頁#story鏈接，它會調用getYourStoryById()功能，並從後端數據。我可以從這個方法的後端獲取數據，並且可以在$scope.yourStoryById = response.data;中設置這些數據。我的問題是當控制要story.html（$ location.path（'/ story'））時，我只能看到「Hello Story Page」而不是$ scope.yourStoryById中的其他數據。
請仔細閱讀[在什麼情況下我想補充「緊急」或其他類似的詞組我的問題，以獲得更快的答案？]（// meta.stackoverflow.com/q/326569） - 總結是，這不是解決志願者的理想方式，並且可能適得其反。請不要將這添加到您的問題。 – halfer