0

我知道这个问题可能很愚蠢，但是在搜索了整个 stackoverflow 和其他博客以及视频教程之后，我别无选择，只能在 stackoverflow 上问这个问题。我一直在通过在线教程学习 Angular.js。

我有 2 个文件。index.html 和 app.js

这是我的代码的一些快照。

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')}]);

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>

现在，我有两个问题：

  1. ui-sref 部分出了什么问题。当我使用 href 而不是 ui-sref 时，它工作得非常好。为什么会这样？
  2. 我一直在为 home.html 和 posts.html 使用内联模板，但是如果我将它们放入单独的文件中，那么我的整个应用程序就会损坏。为什么？

任何帮助将不胜感激。

4

1 回答 1

2

1）您使用的方式ui-sref是导致它损坏的原因。在您的应用程序中尝试这个，

<a ui-sref="posts({ id: $index })">Comments</a>

2）假设您的新模板文件与您的 index.html 和 app.js 相同级别，您无需提及templateUrl: '/posts.html'，只需使用templateUrl: 'posts.html'.

于 2016-01-28T13:23:27.093 回答