PhoneGap中文网

标题: 关于ionic页面跳转state.go 报state undefined的错误。 [打印本页]

作者: 乐尚 时间: 2016-1-7 11:05
标题: 关于ionic页面跳转state.go 报state undefined的错误。
问题描述：

需要实现：在一个页面里点击查询按钮之后传入查询参数，然后跳转到另一个页面展现查询出来的数据；
问题：没有跳转，报state undefined的错误。

代码如下：
我首先新定义了一个state状态：tab.room
如下代码：
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.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 && window.cordova.plugins.Keyboard) {
   cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   cordova.plugins.Keyboard.disableScroll(true);

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

//解决导航在上面的bug
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

            $ionicConfigProvider.platform.ios.tabs.style('standard');
      $ionicConfigProvider.platform.ios.tabs.position('bottom');

      $ionicConfigProvider.platform.android.tabs.style('standard');
      $ionicConfigProvider.platform.android.tabs.position('bottom');

      $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
      $ionicConfigProvider.platform.android.navBar.alignTitle('left');

      $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
      $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

      $ionicConfigProvider.platform.ios.views.transition('ios');
      $ionicConfigProvider.platform.android.views.transition('android');

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

  // setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'tab/tabs.html',
controller: 'TabCtrl'
  })

  // Each tab has its own nav history stack:

.state('tab.main', {
url: '/main',
views: {
   'tab-main': {
      templateUrl: 'main.htm',
      controller: 'MainCtrl'
   }
}
  })


  .state('tab.dash', {
url: '/dash',
views: {
   'tab-dash': {
      templateUrl: 'tab/tab-dash.html',
      controller: 'DashCtrl'
   }
}
  })

  .state('tab.chats', {
   url: '/chats',
   views: {
      'tab-chats': {
      templateUrl: 'tab/tab-chats.html',
      controller: 'ChatsCtrl'
      }
   }
})
.state('tab.chat-detail', {
   url: '/chats/:chatId',
   views: {
      'tab-chats': {
      templateUrl: 'tab/chat-detail.html',
      controller: 'ChatDetailCtrl'
      }
   }
})

  .state('tab.account', {
url: '/account',
views: {
   'tab-account': {
      templateUrl: 'tab/tab-account.html',
      controller: 'AccountCtrl'
   }
}
  })

  .state('tab.room',{
      url: '/room',
      views: {
               'tab-room':{
                        templateUrl: 'tab/tab-room.html',
                  controller: 'RoomInfoCtrl'
               }
      }
  });

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

});

当我点击查询的时候调用方法$scope.queryRoomInfo()跳转到页面tab-room.html

方法如下：
$scope.queryRoomInfo = function(){
            var provinceId = $scope.data.currentProvinceId;
            var cityId = $scope.data.currentCityId;
            var reginId = $scope.data.currentAreaId;
            var townId = $scope.data.currentTownId;
            var roomCode = $("#roomCode_query").val();
            var roomName = $("#roomName_query").val();

            var inputDatas = new Object;
            inputDatas.provinceId = provinceId;
            inputDatas.cityId = cityId;
            inputDatas.reginId = reginId;
            inputDatas.townId = townId;
            inputDatas.roomCode = roomCode;
            inputDatas.roomName = roomName;

            $state.go('tab.room',{param:inputDatas});

      }

若跳转成功，则进入方法查询，代码如下：

.controller('RoomInfoCtrl', function($scope,$cacheFactory,$ionicPopup, $timeout,$rootScope,$stateParams) {

      $scope.showRoomInfo = function(){
            $scope.nif=true;
            $scope.pageNum=0;
            var staffId = sessionStorage.getItem("staffid");
            var isSuperJob = sessionStorage.getItem("issuperjob");
            var provinceId = $stateParams.param.provinceId;
            var cityId = $stateParams.param.cityId;
            var reginId = $stateParams.param.reginId;
            var townId = $stateParams.param.townId;
            var roomCode = $stateParams.param.roomCode;
            var roomName = $stateParams.param.roomName;

            var areaId = $scope.data.currentAreaId;
            var options = {
         url : device.serviceip+'/sdbattery/interceptor/requestInterceptor!requestMain.action',
         param: 'type=query&sqlName=runningState.queryRunningStateList&ifPage=y&start='+$scope.pageNum+"&provinceId="+provinceId+"&cityId="+cityId+"®inId="+reginId
                                 +"&townId="+townId+"&roomCode="+roomCode+"&roomName="+roomName+"&staffId="+staffId+"&isSuperJob="+isSuperJob,
         type:'AjaxACode',
         success:function(json) {
            for(var i in json){
                     if(i=='rValue'){
                     var rValue=json;
                     if(json.length<10){
                              $scope.nif=false;
                     }
                     }
            }

               if($scope.itemsData==null){
               $scope.itemsData=rValue;
               }else{
                     var itemlist=$scope.itemsData.concat(rValue);
                     $scope.itemsData=itemlist;
               }
         },
         error:function(a,b) {
               sysop.sysMakeText("服务端接口异常，请联系管理员！");
         }
   };
         new http_oper(options);
      }

      $scope.loadMore = function() {
      $timeout( function() {
               $scope.pageNum=$scope.pageNum+1;
            $scope.showRoomInfo();
            $scope.$broadcast('scroll.infiniteScrollComplete');

            }, 1000);

   };

   $scope.moreDataCanBeLoaded = function(){
      return $scope.nif;
   };

document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() {
            $scope.pageNum=1;
            $scope.showRoomInfo();
   };
})

希望看到的大神给个提示，我哪里写错了？万分感谢，在线等。

作者: admin 时间: 2016-1-7 14:46
$state需要依赖注入到你的controller里面才能使用 $state.go

作者: 乐尚 时间: 2016-1-7 15:07

admin 发表于 2016-1-7 14:46
$state需要依赖注入到你的controller里面才能使用 $state.go

你好！管理员，我现在已经注入了，没有报之前的错了，但是还是没有跳转。。。

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)