Angular.js ui-sref 没有创建超链接
Angular.js ui-sref is not creating hyperlink
我知道这个问题可能很愚蠢,但是在搜索了整个 Whosebug 和其他博客以及视频教程之后,我别无选择,只能在 Whosebug 上问这个问题。
我一直在通过在线教程学习 Angular.js。
I have 2 files.
index.html and app.js
这是我的代码的一些截图。
States Configuration Part inside 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')}]);
Inline templates inside index.html (1-home.html , 2-posts.html)
<ui-view></ui-view>
<script type="text/ng-template" id="/home.html">
<!--home.html part-->
</script>
<script type="text/ng-template" id="/posts.html">
<!--posts.html part-->
</script>
里面 home.html 我有评论的超链接。
<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 ui-sref="/posts/{{$index}}">Comments</a>
</span>
</span>
</div>
现在,当我在我的本地主机上 运行 这个 WebApp 时,它显示了我的评论超链接的渲染 html,但它没有为我提供任何导航(超链接不起作用)。
<span>
<a ui-sref="/posts/0">Comments</a>
</span>
现在,我有两个问题:
- ui-sref 出了什么问题 part.When 我使用 href 而不是 ui-sref 然后它工作得很好 fine.Why 是这样吗?
- 我一直在为 home.html 和 posts.html 使用内联模板,但如果我将它们放入单独的文件中,那么我的整个应用程序都会得到 broken.Why?
任何帮助将不胜感激。
1)您使用 ui-sref
的方式是导致它在您的应用程序中 break.Try 的原因,
<a ui-sref="posts({ id: $index })">Comments</a>
2) 假设你的新模板文件与你的 index.html 和 app.js 级别相同,你不需要提到 templateUrl: '/posts.html'
,只需使用 templateUrl: 'posts.html'
.
我知道这个问题可能很愚蠢,但是在搜索了整个 Whosebug 和其他博客以及视频教程之后,我别无选择,只能在 Whosebug 上问这个问题。 我一直在通过在线教程学习 Angular.js。
I have 2 files. index.html and app.js
这是我的代码的一些截图。
States Configuration Part inside 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')}]);
Inline templates inside index.html (1-home.html , 2-posts.html)
<ui-view></ui-view>
<script type="text/ng-template" id="/home.html">
<!--home.html part-->
</script>
<script type="text/ng-template" id="/posts.html">
<!--posts.html part-->
</script>
里面 home.html 我有评论的超链接。
<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 ui-sref="/posts/{{$index}}">Comments</a>
</span>
</span>
</div>
现在,当我在我的本地主机上 运行 这个 WebApp 时,它显示了我的评论超链接的渲染 html,但它没有为我提供任何导航(超链接不起作用)。
<span>
<a ui-sref="/posts/0">Comments</a>
</span>
现在,我有两个问题:
- ui-sref 出了什么问题 part.When 我使用 href 而不是 ui-sref 然后它工作得很好 fine.Why 是这样吗?
- 我一直在为 home.html 和 posts.html 使用内联模板,但如果我将它们放入单独的文件中,那么我的整个应用程序都会得到 broken.Why?
任何帮助将不胜感激。
1)您使用 ui-sref
的方式是导致它在您的应用程序中 break.Try 的原因,
<a ui-sref="posts({ id: $index })">Comments</a>
2) 假设你的新模板文件与你的 index.html 和 app.js 级别相同,你不需要提到 templateUrl: '/posts.html'
,只需使用 templateUrl: 'posts.html'
.