Question

使用Ionic和Ui-Router进行简单路由。当我点击应该更改视图的链接（带有ui-sref的锚标记）时，控制器会更改（我可以告诉它，因为正在将某些内容打印到控制台）但是没有任何内容被注入到视图中。

以下是相关代码。

APP.JS

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')

$stateProvider.state('feed', {
   url: '/feed',
    views: {
      feed: {
        templateURL: '/../feed.html',
        controller: 'feedController'
      }
    }
  }) 
})

INDEX.HTML

<body ng-app="app">

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">app</h1>
  </ion-header-bar>
  <ion-content>
  <a ui-sref="feed">go to feed </a>
  <div ui-view>
    <ion-nav-view name="Feed"></ion-nav-view>
  </div>


  </ion-content>
</ion-pane>

FEED.HTML

<ion-view title="Feed">
<div class="list card" ng-repeat="photo in media track by $index">
      <div class="item item-avatar">
        <img ng-src={{photo.user.profile_picture}}>
        <h2> {{photo.user.username }}</h2>
        <p>{{photo.created_time | date:'HH:mm:ss Z'}}</p>
      </div>

      <div class="item item-image">
        <img ng-src={{photo.images.low_resolution.url}}>
      </div>

      <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item" href="#">
        <i class="icon ion-ios-heart-outline"></i>
        </a>
        <a class="tab-item" href="#">
        <i class="icon ion-ios-chatbubble-outline"></i>
        </a>
     </div>


     <div class="item item-icon-left">
      <i class="icon ion-ios-heart"></i>
      <span class="likes"> {{photo.likes.count}} likes </span>
     </div>
     <div class="item">
        <span> {{photo.user.username}}: {{photo.caption.text}} </span> 
     </div>
     <div class="item">
        <ul ng-repeat="comment in photo.comments.data">
            <li> {{comment.from.username}} {{comment.text}} </li>
        </ul>
      </div>
</div>
</ion-view>

Answer 1

您的问题来自：templateURL: '/../feed.html',

templateUrl从www文件夹开始，如果您有以下结构：

project 
 - templates
    - feed.html
 - platforms
 - www
    - js
    - css
    - index.html

您应使用templateURL: './../feed.html',

但正确的结构定义了templates文件夹

中的www

project 
  - platforms
  - www
    - templates
      - feed.html
    - js
    - css
    - index.html

以及以下路由：templateURL: 'templates/feed.html',

此外，HTML视图命名应与ui-routing命名同步。所以对于这种配置：

$stateProvider.state('feed', {
   url: '/feed',
    views: {
      feed: {
        templateURL: '/../feed.html',
        controller: 'feedController'
      }
    }
  }) 
})

你应该

    <ion-nav-view name="feed"></ion-nav-view>

Ionic Nav View在状态更改时更改控制器，但不查看

1 个答案: