Angular/Ionic Link 更新 URL，但未调用控制器和模板

Question

好吧，我和我的朋友已经为此工作了一段时间，只是无法弄清楚错误是什么。基本上，故事是我们想从消息的列表视图开始，当您单击其中一条消息时，您会转到详细信息页面。相当标准的简单的东西。

所以问题是，当您单击一条消息时，url 会更新，但不会调用控制器，也不会呈现新模板。正如您在下面的 message-detail-controller.js 中看到的，我正在向控制台记录一条消息，但该消息根本没有显示。好的，这是一些代码：

app.js

angular.module('exampleApp', ['ionic', 'ui.router'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.views.maxCache(0);

  $stateProvider

  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'app/tabs/tabs.html',
    controller: 'TabsCtrl'
  })

  .state('tab.messages', {
    url: '/messages',
    views: {
      'tab-messages': {
        templateUrl: 'app/messaging/messages.html',
        controller: 'MessagesCtrl'
      }
    }
  })

  .state('tab.message-detail', {
    url: '/message-detail/:messageId',
    views: {
      'tab-message-detail': {
        controller: 'MessageDetailCtrl',
        templateUrl: 'app/messaging/message-detail.html'
      }
    }
  })
});

条消息-controller.js

angular.module('exampleApp').controller('MessagesCtrl', MessagesCtrl);

function MessagesCtrl($http, $scope, $state, BACKEND_URL, Auth) {
  var url = BACKEND_URL + '/messages';

  $http.get(url)
    .success(function (data, status, headers, config) {
      $scope.messages = data.messages;
    })
    .error(function (data, status, headers, config) {
      console.log('Something went wrong.');
    });
}

messages.html

<ion-view view-title="Messages">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right"
      ng-repeat="message in lastMessages" type="item-text-wrap"
      ui-sref="tab.message-detail({messageId: message.id})">
        <img ng-src="{{ message.face }}">
        <h2>{{message.name}}</h2>
        <p>{{message.content}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

消息详情-controller.js

  angular.module('exampleApp').controller('MessageDetailCtrl', MessageDetailCtrl);

  function MessageDetailCtrl() {
    console.log("I got called");
  }

留言-detail.html

<ion-view view-title="Message Detail">
  <ion-content>
    <h1>THIS WORKS?</h1>
  </ion-content>
</ion-view>

Answer 1

已解决。所以，出于我不完全理解的原因，如果你想用另一个 template/controller 替换一个 ion 选项卡的内容，你需要参考路由器中的父视图。观察：

.state('tab.message-detail', {
  url: '/message-detail/:messageId',
  views: {
    'tab-messages': {
      controller: 'MessageDetailCtrl',
      templateUrl: 'app/messaging/message-detail.html'
    }
  }
})

因此，您需要 views: { 'tab-messages'...

而不是 views: { 'tab-message-detail....

Angular/Ionic Link 更新 URL，但未调用控制器和模板

Angular/Ionic Link Updates URL, but controller and template not being called

angularjs

angular-ui-router

ionic-framework