0
我真的需要ngRoute模塊的幫助，因爲無論我做什麼 - 偏分量都沒有得到更新。 基本上這是我的文件夾結構：angular.js ngRoute模塊不刷新視圖
https://gyazo.com/a5c7ce7e52687f525d8d1ffd718c9a5a
的index.html菜單：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
這些是index.html包括：
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"> </script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
這些app.js的其中i配置routeProvider內容
'use strict';
angular.module('confusionApp', ['ngRoute'])
.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// route for the contactus page
.when('/contactus', {
templateUrl : 'contactus.html',
controller : 'ContactController'
})
// route for the menu page
.when('/menu', {
templateUrl : 'menu.html',
controller : 'MenuController'
})
// route for the dish details page
.when('/menu/:id', {
templateUrl : 'dishdetail.html',
controller : 'DishDetailController'
})
.otherwise('/contactus');
}]);
我使用
<ng-view></ng-view>
到desplay諧音，但似乎沒有做工作。 我是Angular的新手，所以任何幫助或建議將非常感謝！
以防萬一有controllers.js 'use strict';
angular.module('confusionApp', [])
.controller('MenuController', ['$scope', 'menuFactory', function($scope, menuFactory) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
$scope.dishes= menuFactory.getDishes();
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
}
else if (setTab === 3) {
$scope.filtText = "mains";
}
else if (setTab === 4) {
$scope.filtText = "dessert";
}
else {
$scope.filtText = "";
}
};
$scope.isSelected = function (checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];
$scope.channels = channels;
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback = function() {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
}
else {
$scope.invalidChannelSelection = false;
$scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };
$scope.feedback.mychannel="";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
};
}])
.controller('DishDetailController', ['$scope', '$routeParams', 'menuFactory', function($scope, $routeParams, menuFactory) {
var dish= menuFactory.getDish(parseInt($routeParams.id,10));
$scope.dish = dish;
}])
.controller('DishCommentController', ['$scope', function($scope) {
//Step 1: Create a JavaScript object to hold the comment from the form
$scope.customer_comments = {author:"", rating:"", comment:"", date:""};
$scope.customer_comments.rating = 5;
$scope.submitComment = function() {
//Step 2: This is how you record the date
//"The date property of your JavaScript object holding the comment" = new Date().toISOString();
var date = new Date().toISOString();
$scope.customer_comments.date = date;
console.log($scope.customer_comments);
// Step 3: Push your comment into the dish's comment array
//$scope.dish.comments.push("Your JavaScript Object holding the comment");
$scope.customer_comments.rating = Number($scope.customer_comments.rating);
$scope.dish.comments.push($scope.customer_comments);
//Step 4: reset your form to pristine
$scope.customer_comments = {name:"", number_of_stars:"", comment:"", date:""};
$scope.commentForm.$setPristine();
$scope.customer_comments.rating = 5;
console.log($scope.customer_comments);
//Step 5: reset your JavaScript object that holds your comment
}
}])
;
這是一個到app.js的鏈接 –
你能不能顯示你的控制器的代碼 – aitnasser
謝謝，剛把它加到了請求中！ –