Question

我是离子的新手（在棱镜中只是少一点）。

我正在尝试在两个视图之间进行简单的切换：

HTML

<body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view name="intro"></ion-nav-view>
    <ion-nav-view name="login"></ion-nav-view>
    <ion-nav-view name="home"></ion-nav-view>
    <ion-nav-view name="pizze"></ion-nav-view>
    <ion-nav-view name="sponsor"></ion-nav-view>
    <ion-nav-view name="scontrino"></ion-nav-view>
  </body>

APP.js

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

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider


    .state('intro', {
      url: '/intro',
      views: {
        'intro': {
          templateUrl: 'templates/intro.html',
          controller: 'IntroCtrl'
        }
      }
    })
    .state('login', {
      url: '/login',
      views: {
        'login': {
          templateUrl: 'templates/login.html',
          controller: 'LoginCtrl'
        }
      }
    })
  $urlRouterProvider.otherwise('/intro');

});

Controllers.js

angular.module('starter.controllers', [])

.controller('IntroCtrl', function($scope,$location) {
    $location.url("/login");

})
.controller('LoginCtrl', function($scope,$location) {

})

介绍正确显示，但当它尝试将位置更改为“login.html”时，它说：

TypeError: Cannot read property 'querySelectorAll' of undefined
    at cancelChildAnimations (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30611:21)
    at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:30176:11)
    at Object.leave (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:38411:24)
    at updateView (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41540:31)
    at eventHook (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:41501:17)
    at Scope.$broadcast (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:21190:28)
    at $state.transition.resolved.then.$state.transition (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:33975:22)
    at wrappedCallback (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19894:81)
    at http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:19980:26
    at Scope.$eval (http://localhost:8000/www/lib/ionic/js/ionic.bundle.js:20906:28)

可能是什么问题???

谢谢！

Answer 1

试试这个

angular.module('starter.controllers', [])

.controller('IntroCtrl', function($scope,$state) {
     $state.transitionTo("login");

})
.controller('LoginCtrl', function($scope,$location) {

})

Answer 2

您使用的是错误的视图名称。在州，视图的名称

views: {
  '_name_': {
}

用于不同视图的不同导航历史记录。

假设您有两个标签home和pizza，并且您希望两个标签都有多个页面，那么视图名称就会派上用场。

对于您的示例，了解您希望如何使用视图非常重要。我为您设置了一个示例，使视图可以在选项卡中访问。请参阅此示例：http://plnkr.co/edit/Yd5ehQd0wnwlPzP0KYnp?p=preview

离子变化位置不起作用

2 个答案: