【发布时间】：2017-04-14 03:03:48
【问题描述】：
所以，我决定查看 AngularJS，并且正在学习 thinkster.io 上的 Angular Rails 教程。我已经到了创建第二个页面的部分，并在主页上创建一个链接以访问该页面。但是，这些链接似乎不起作用。这是我在 thinkster 项目上的进展的 html 和 js 文件：
index.html
<html>
<head>
<title>Flapper News</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="app.js"></script>
<style> .glyphicon-thumbs-up {
cursor: pointer
} </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
<a href="#/posts/{{$index}}">Comments</a>
</span>
</span>
</div>
<form ng-submit="addPost()"
style="margin-top:30px;">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Title"
ng-model="title"/>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"/>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
</body>
</html>
app.js
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
])
.factory('posts', [function() {
var o = {
posts: []
};
return o;
}])
.controller('MainCtrl', [
'$scope',
'posts',
function ($scope, posts) {
$scope.posts = posts.posts;
$scope.addPost = function() {
if (!$scope.title || $scope.title === '') {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}
])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
}
]);
在花了几个小时查看我的代码、查看在线示例并查看本教程的前面步骤之后，我决定尝试创建一个尽可能简单的应用程序，以尝试让链接在其中工作，同时徒劳无功。这是我为更简单的应用程序编写的代码：
index2.html
<html>
<head>
<title>Flapper News</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="app2.js"></script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
{{test}}
<a href="#/posts">Posts</a>
</script>
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h1>Posts</h1>
</div>
{{test}}
<a href="#/home">Home</a>
</script>
</body>
</html>
app2.js
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}
])
.controller('MainCtrl', [
'$scope',
function ($scope) {
$scope.test = 'Home';
}
])
.controller('PostsCtrl', [
'$scope',
function($scope) {
$scope.test = 'Posts';
}
]);
不知何故，我认为我错过了由角度控制器处理的链接的某些内容，但我终其一生都无法弄清楚是什么。任何解释/帮助将不胜感激。
【问题讨论】：
-
你要修复哪一个？
-
理想情况下两者都有，假设两者的问题相同，但第一个更重要。
-
有什么问题？
-
您的帖子链接看起来不起作用，因为您没有 ID。 url 映射为：/posts/{id} Posts
标签： angularjs