On clicking button, only url chnages not the state/view

ionic-v1
1

It has been a real struggle for me to navigate b/w different screens/views. I have created multiple templates under the templates directory in www. I have used ng-click directive that will trigger a changePage() function under which I have written the following code:

app.controller(‘loginController’, function($scope,$state){
$scope.changePage = function () {
$state.go(‘user’);
}
});

But whenever I click on the button, the url changes but the view doesn’t. I have to explicitly reload the page in the browser to get the corresponding correct view to the url. I figure may be I need some asynchronous directive but I don’t know any. Any remedies pls? I am so pissed off.

2

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

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: GitHub - angular-ui/ui-router: The de-facto solution to flexible routing with nested views in AngularJS
// 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: ‘templates/tabs.html’
})

// Each tab has its own nav history stack:

.state(‘tab.dash’, {
url: ‘/dash’,
views: {
‘tab-dash’: {
templateUrl: ‘templates/tab-dash.html’,
controller: ‘DashCtrl’
}
}
})
$urlRouterProvider.otherwise(‘/tab/dash’);

});

Did you have something like above? I just copy and paste the ionic-starter-tabs code.

3

.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state(‘login’,{
url:’/login’,
templateUrl:‘templates/login.html’,
controller:‘loginController’
})
.state(‘users’,{
url:’/users’,
templateUrl:‘templates/users.html’,
controller:‘userController’
})
.state(‘user’,{
url:’/users/:userId’,
templateUrl:‘templates/user.html’,
controller:‘userController’
});
$urlRouterProvider.otherwise(’/login’);
});
app.controller(‘userController’, function($scope,$statePrams){

});
app.controller(‘loginController’, function($scope,$state){
$scope.changePage = function () {
$state.go(‘user’);
}
});

These are the states that I have defined

4

Is there any way I can paste my code? In the preview I see my code is executed and

5

You can paste you code as a link in github or in the forum editor using the markdown reference:

image
ionicForum.PNG961×573 19.9 KB

It works with html too.

<label>Hello world</label>

I’ll be aware of the full code so I can help you too.

6 
<body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
        <ion-nav-view></ion-nav-view>
      </ion-content>
    </ion-pane>
  </body>


<ion-view title="login">
  <ion-content class="has-header padding">
    <button class="button button-positive button-block" ng-click="go('/mariam')">GO</button>
  </ion-content>
</ion-view>

<ion-view title="mariam">
  <ion-content class="has-header padding">
    <div class="list">
      <p class="list-item">Mariam Jamal</p>
    </div>
  </ion-content>
</ion-view>


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

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

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
  .config(function($stateProvider,$urlRouterProvider){
    $stateProvider
      .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginCtrl'
      })
      .state('mariam',{
        url:'/mariam',
        templateUrl:'templates/mariam.html'

    });
    $urlRouterProvider.otherwise('/login');
  })
  .controller('loginCtrl', function($state,$scope){
    $scope.go = function(path){
      $location.path(path);
    };
  })