Question

好的，所以我的朋友和我一直在研究这个问题并且无法找出错误是什么。基本上，故事是我们想要从消息的列表视图开始，当您单击其中一条消息时，您将转到详细信息页面。相当标准的简单东西。

所以问题是当你点击一条消息时，网址会更新，但是控制器没有被调用，也没有一个新模板被渲染。正如您在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

解决。因此，由于我不完全理解的原因，如果要用另一个模板/控制器替换离子选项卡的内容，则需要引用路由器中的父视图。观察：

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

因此，您需要执行views: { 'tab-message-detail....

而不是views: { 'tab-messages'...

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

1 个答案: