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>

ここで、2 つの質問があります。

  1. ui-sref 部分で何が問題になったのですか? ui-sref の代わりに href を使用すると、完全に正常に動作します。
  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 に答える