Geek Answers Handbook

Routing issue using ui-router in ionic (AngularJS)

I have user interface routes defined in ionic form and made the console.log controller in the controller, but my problem is that I switch between urls using ng-href = "/ # / LINK", then none the data is not displayed on the console, but when I refresh the same page I can see the data in the console ... let me know what I'm doing wrong here.

Routes -

  .state('app.roomone', { url: "/roomone/:id", views: { 'menuContent': { templateUrl: "templates/roomone.html", controller: 'RoomoneCtrl' } } }) .state('app.roomtwo', { url: "/selecroom/:roomname/:roomindex", views: { 'menuContent': { templateUrl: "templates/roomtwo.html", controller: 'RoomtwoCtrl' } } })

Below are my controllers -

 .controller('RoomoneCtrl', function($scope, $rootScope) { console.log("I am in room one"); }); .controller('RoomtwoCtrl', function($scope, $rootScope) { console.log("I am in room two"); });

In my template - I just have - <a ng-href="/#/roomone/MY_ID" />Dummy Link</a>

Problem. Only when updating (F5) do I get console values ​​such as "I am alone in the room", "not by simply navigating the link. Let me know what I'm doing wrong.

0
source share
2 answers

As stated in the comments: the view is cashed, and therefore the controller is not initialized the second time you visit the page.

One solution not mentioned. The template is not updated when using ui-router and ion-tabs . (change cashing to false or on the router), so I add an additional answer here (it would be better to add it to the comments, but with a code example this would become unclear)

Listen in the controller (or directive) event $ ionicView.beforeEnter to find out when the view is active.

 .controller('RoomoneCtrl', function($scope, $rootScope) { $scope.$on('$ionicView.beforeEnter', function () { // (on first time added to DOM and after the view becomes active after cached // change some value on your scope $scope.date = new Date(); console.log("I am in room one"); }); });

For ion view events see: http://ionicframework.com/docs/api/directive/ionView/

0
source

I also ran into the same problem. This is a cache problem. I fixed the problem using cache: false . You added it to your route, as shown below,

 .state('app.roomone', { url: "/roomone/:id", cache : false, views: { 'menuContent': { templateUrl: "templates/roomone.html", controller: 'RoomoneCtrl' } } }) .state('app.roomtwo', { url: "/selecroom/:roomname/:roomindex", cache : false, views: { 'menuContent': { templateUrl: "templates/roomtwo.html", controller: 'RoomtwoCtrl' } } })
0
source

More articles:


All Articles