我正在我的 Apache 服务器中尝试以下代码，但它不起作用(单击链接时，没有任何反应)。它应该显示每个链接的标题/内容。
index.html
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="app.js"></script>
<script src="post.js"></script>
</head>
<body ng-app="blogApp">
<nav>
<a href="#/post/1">Blog post</a>
<a href="#/post/2">Other post</a>
<a href="#/post/3">Last post</a>
</nav>
<!-- Place where our user will be displayed -->
<div ng-view>
</div>
</body>
</html>
app.js
angular.module('blogApp', ['ngRoute'])
// Setting configuration for application
.config(function ($routeProvider) {
$routeProvider.when('/post/:postId', {
controller: postCtrl,
templateUrl: 'post.html'
})
})
// Ignore code below. This is usually in seperate html files
.run(function ($templateCache){
$templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
});
post.js
function postCtrl ($scope, $routeParams) {
$scope.title = "Error";
$scope.content = "No post with that number";
$scope.postId = $routeParams.postId;
switch ($routeParams.postId) {
case '1':
$scope.title = "Hello world";
$scope.content = "This is my first post";
break;
case '2':
$scope.title = "Post no 2";
$scope.content = "This is my first post";
break;
case '3':
$scope.title = "Last post";
$scope.content = "Bye";
break;
}
}
感谢任何帮助。
最佳答案
你的代码似乎没问题，只是你错过了一个重要的部分
app.controller('postCtrl', postCtrl);
请参阅下面的演示
var app = angular.module('blogApp', ['ngRoute']);
// Setting configuration for application
app.config(function($routeProvider) {
$routeProvider.when('/post/:postId', {
controller: postCtrl,
templateUrl: 'post.html'
})
})
// Ignore code below. This is usually in seperate html files
.run(function($templateCache) {
$templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
});
app.controller('postCtrl', postCtrl);
function postCtrl($scope, $routeParams) {
$scope.title = "Error";
$scope.content = "No post with that number";
$scope.postId = $routeParams.postId;
switch ($routeParams.postId) {
case '1':
$scope.title = "Hello world";
$scope.content = "This is my first post";
break;
case '2':
$scope.title = "Post no 2";
$scope.content = "This is my first post";
break;
case '3':
$scope.title = "Last post";
$scope.content = "Bye";
break;
}
}<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>
<body ng-app="blogApp">
<nav>
<a href="#/post/1">Blog post</a>
<a href="#/post/2">Other post</a>
<a href="#/post/3">Last post</a>
</nav>
<!-- Place where our user will be displayed -->
<div ng-view>
</div>
</body>关于Angularjs 路由参数不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29305091/