Блог

Главная - Вопросы по программированию - Как использовать ионные параметры состояния

Как использовать ионные параметры состояния

#angularjs #ionic-framework

#angularjs #ионный фреймворк

Вопрос:

Я разрабатываю приложение, в котором оно использует информацию первой страницы, чтобы эта информация использовалась в качестве входных данных для второй страницы. Для передачи информации я использую $stateParams , но, тем не менее, на второй странице не отображаются выходные данные.

html страница 1:

 <ion-list>
  <ion-item ng-model="carBrand" ng-repeat="name in carSelect"  ng-click="selectItem(carBrand)">
      {{name.name}}
  </ion-item>
 </ion-list>

html страница 2:

 <ion-checkbox ng-model="cartype" ng-repeat="brandType in carBrand.types">
   <div align="center"><span>{{brandType}}</span></div>
</ion-checkbox><br><br>

контроллер:

 carService.controller('carBrand',['$scope','carRepository','$rootScope','$state','$stateParams',function($scope,carRepository,$rootScope,$state,$stateParams){

 $scope.newCarList=[];
 $rootScope.carSelect=carRepository.data;
 $scope.selectItem=$stateParams.name;
 $scope.selectItem=function(key){

 $scope.newCarList.push(key);
 $state.go('app.CarDetails',{value:$scope.name});
}

app.js

 var carService = angular.module('CarWash',['ionic']).config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app.Cartype',{
        url:'/Cartype',
        views:{
          'menuContent':{
            templateUrl:'templates/Cartype.html',
            controller:'carBrand'
          }
        }
      })
      //carEdit.html

    .state('app.carEdit',{
        url:'/carEdit',
        views:{
          'menuContent':{
            templateUrl:'templates/carEdit.html'
          }
        }
      })

Комментарии:

1. Как выглядят ваши маршруты?

2. @Makoto Я отредактировал сообщение. надеюсь, это поможет

3. почему вы устанавливаете $scope.selectItem = $stateParams.name , а затем в следующей строке определяете его как функцию?

Ответ №1:

Похоже, вы тоже используете uiRouter?

Есть 2 вопиющие проблемы, которые я вижу сразу.

  • вы говорите uiRouter перейти в состояние ‘app.CarDetails’, которое я не вижу определенным в вашей конфигурации $state
  • вы не объявили никаких параметров для использования в ваших состояниях.

Если вы хотите управлять состоянием пользовательского интерфейса с помощью параметров, вам нужно либо определить параметры в URL, либо определить объект параметров в состоянии. Давайте предположим, что вы хотели перейти в ‘app.CarEdit’ при нажатии на элемент. Ваше состояние будет выглядеть следующим образом:

Параметры, управляемые URL:

 .state('app.CarEdit', {
    url: '/edit/{type}',
    ....
})

или

параметры, управляемые хэшем:

  .state('app.CarEdit', {
     url: 'carEdit',
     params: { type: undefined }
 })

В любом случае при вызове $state.go вам необходимо передать параметры обратно с type определенным: 

 $state.go('app.CarEdit', { type: $scope.selectedType })

Что-то вроде этого.