Question

由于某种原因，ui路由器不会改变状态或者确实改变状态但它没有渲染状态，这是我的代码

    angular.module('splash', ['ionic'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          cordova.plugins.Keyboard.disableScroll(true);

        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    })


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

        .state('splash', {
        url: '/splash',

        templateUrl: '/splash.html',
      })

      .state('splash.login', {
        url: '/login',
        views: {
          'menuContent': {
            templateUrl: 'login.html',
            controller: "SplashCtrl"
          }
        }
      })

      .state('splash.register', {
          url: '/register',
          views: {
            'menuContent': {
              templateUrl: 'register.html',
              controller: "SplashCtrl"
            }
          }
        })
      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/splash');
    }])

    .controller('SplashCtrl', function($scope, $state) {
        $scope.go = function(state) {
            $state.go(state);
        }

    });

我在做什么有什么不对吗？在html文件中我只添加ng-app指令，它加载第一个状态没有任何问题，但它不会改变状态如果您有任何想法，请在这方面帮助我在此先感谢

Answer 1

我修复了你的代码并添加了一些评论。随意询问任何不确定性。

        angular.module('splash', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


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

    .state('splash', {
    url: '/splash',
    abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
    templateUrl: '/splash.html',
  })

  .state('splash.login', {
    url: '/login',
    views: {
      'menuContent': { // Is only your  menu contect visible on your app ?
        templateUrl: 'login.html',
        controller: "SplashCtrl"
      }
    }
  })

  .state('splash.register', {
      url: '/register',
      views: {
        'menuContent': {
          templateUrl: 'register.html',
          controller: "SplashCtrl"
        }
      }
    })

  // Using stateParams your are able to pass values when switching states.
  .state("splash.third", {
    url : "/thirdpage/:text", // This value is referencing the passed value in the 3th button. 
    views : {
      "menuContent" : {
        templateUrl : "thirdpage.html",
        controller : "SplashCtrl"
      }
    }
  }); // You forgot a ;

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/splash');
}])

.controller('SplashCtrl', function($scope, $state) {
  // Your controller shouldn't know anything about routing. UI-router is fixing that your you! =]
  // An controller is supposed to act as glue between your data (services/factories) and your scope (html templates/directives)
  // e.g.

  $scope.buttonText = "Third button";
});


// On your splash.html

<button ui-sref="splash.login">Login</button>
<button ui-sref="splash.register">Register</button>
<button ui-sref="splash.third({ text : buttonText })">{{buttonText}}</button>

ionic $ state.go（）不会改变状态，检查元素没有错误

1 个答案: