Angularjs 爱奥尼亚导航视图在状态更改时更改控制器，但不更改视图_Angularjs_Ionic

Angularjs 爱奥尼亚导航视图在状态更改时更改控制器，但不更改视图

angularjs

Angularjs 爱奥尼亚导航视图在状态更改时更改控制器，但不更改视图,angularjs,ionic,Angularjs,Ionic,使用Ionic和Ui路由器进行简单路由。当我点击应该更改视图的链接（带有ui sref的锚定标记）时，控制器会更改（我可以看出这一点，因为正在将内容打印到控制台），但不会向视图中注入任何内容这是相关代码 APP.JS .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/') $stateProvider.state('feed', { url: '/feed',

使用Ionic和Ui路由器进行简单路由。当我点击应该更改视图的链接（带有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>

<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>


应用程序
{{photo.likes.count}}likes
{{photo.user.username}:{{{photo.caption.text}

{{comment.from.username}{{comment.text}

您的问题来自这里：

模板URL:'/../feed.html'，

templateUrl

从

www

文件夹开始，因此如果您具有以下结构：

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

您应该使用

templateURL:'./../feed.html'，

但是适当的结构定义了

www

文件夹中的

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

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

此外，HTML视图命名应与ui路由命名同步。
因此，对于这种配置：
$stateProvider.state('feed', {
   url: '/feed',
    views: {
      feed: {
        templateURL: '/../feed.html',
        controller: 'feedController'
      }
    }
  }) 
})

你应该
    <ion-nav-view name="feed"></ion-nav-view>


没有，没有变化。谢谢你！在您定义的html中：name=“Feed”并在您的路由中：views:{Feed:{…}。更新HTML或JS使相同的名称改变了这一点，但遗憾的是仍然没有改变：（我也没有；）OK也被删除了。仍然没有看到任何内容，但是从控制台中的控制器获取日志不要使用ui视图
，因为ion导航视图
组件是连接爱奥尼亚导航的正确组件。爱奥尼亚将用户界面路由器扩展到具有功能的路由器，而使用普通的ui视图
可能会弄脏东西。