$state.go() runs with no errors but doesn't actually work w/ Ionic

3.4k Views Asked by At

I'm simply trying to get the state to change to a new template after running a function on ng-change, from a selection of options.

My function runs fine once a selection is made, but the $state.go() that is called at the end of the function doesn't actually change the state to the next state view I want to navigate to.

Below is my code (simplified). I want to select and option in "template/pages/addit/index.html", run a function, then change state to "template/pages/addit/edit.html".

app.js:

angular.module('starter', ['ionic','firebase'])

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

.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/pages/menu/index.html",
controller: 'AppController'

.state('app.addit', {
url: "/addit",
views: {
  'menuContent': {
    templateUrl: "templates/pages/addit/index.html",
    controller: 'AddItController'
  }
}})

.state('app.addit.edit', {
url: "/edit",
views: {
    templateUrl: "edit.html",
    controller: 'EditItController'
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/addit');
});

add-it-controller.js:

angular.module('starter')
.controller('AddItController', function($scope, $state, addInventory){

$scope.selectNum = function (num) {
  addInventory(num) //works fine
  $state.go('addit.edit');//doesn't actually change the state
  console.log('the state is '+$state.current);

}
});

templates/pages/addit/index.html:

   <ion-view view-title="Addit">
  <ion-content>
  <div class="list card">

       <label class="item item-input item-select">
          <div class="input-label">
            How many?
          </div>
          <form >
            <select ng-change='selectNum(num)' ng-model="num"  required>

              <option  value='1'  selected>1</option>
              <option  value='2' >2</option>

            </select>
        </form>
      </label>
  </ion-content>
</ion-view>
2

There are 2 best solutions below

2
On

May be $state.go('app.addit.edit') will do the trick in your controller. You missed to provide the whole statename.

0
On

Actually, it turned out to be an issue with app.js where I should have had:

 .state('app.edit', {
    url: "/addit/edit",
    views: {
      'menuContent': {
        templateUrl: "templates/pages/addit/editphotos.html"
      }
    }
  });

What I was doing before was trying to create the state for the 'edit' page without including it as a sub-state of 'menuContent'