AngularJS ng-click to go to another page (with Ionic framework)

Question

Ideally, when I click on the button (which is located on the Ionic navigation bar at the top), it should bring me to another page. However its not working. After clicking the navigation bar button, everything disappears.

When I used dummy codes, it works; a warning appears. But when I change it to the actual code, it does not work.

I have a feeling what is wrong with the controller codes and how the URL or view is referenced. But testing with href and ui-sref also gives nothing. Google Devt Tools (JS console) and Batarang also show nothing.

Can someone show me please?

dummy html code

<button class="button button-icon ion-compose" ng-click="create()"></button> 

dummy controller code in js file

 $scope.create = function() { alert("working"); }; 

actual html code (I tried all 4 versions)

 <button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button> <button class="button button-icon ion-compose" ui-sref="tab.newpost"></button> <button class="button button-icon ion-compose" href="/tab/newpost"></button> <button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button> 

Controller file (Post and Auth dependencies work fine). When I try to put the URL in the .go () and function () functions, the application does not work.

 app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) { $scope.post = {url: 'http://', title: ''}; $scope.create = function() { /* $location.path('/tab/newpost'); */ /* this variant doesnt work */ $state.go("/tab/newpost"); }; }); 

Extract js state file

 .state('tab.newpost', { url: '/newpost', views: { 'tab-newpost':{ templateUrl: 'templates/tab-newpost.html', controller: 'NewCtrl' } } }); $urlRouterProvider.otherwise('/auth/login'); 

Answer 1

Based on the comments, and because @Thinkerer (OP-original poster) created the plunker for this case, I decided to add another answer with more detailed information.

• Here is the plunker created by @Thinkerer
• here is its updated and working version

The first and important change:

 // instead of this $urlRouterProvider.otherwise('/tab/post'); // we have to use this $urlRouterProvider.otherwise('/tab/posts'); 

since the definition of states:

 .state('tab', { url: "/tab", abstract: true, templateUrl: 'tabs.html' }) .state('tab.posts', { url: '/posts', views: { 'tab-posts': { templateUrl: 'tab-posts.html', controller: 'PostsCtrl' } } }) 

and we need their concatenated url '/tab' + '/posts' . What is the URL we want to use as

The rest of the application is really close to the result we need ...
For example. we must place the content in one targetgood view, only they have been changed:

 .state('tab.newpost', { url: '/newpost', views: { // 'tab-newpost': { 'tab-posts': { templateUrl: 'tab-newpost.html', controller: 'NavCtrl' } } 

because .state('tab.newpost' will replace .state('tab.posts' , we have to put it in the same anchor:

 <ion-nav-view name="tab-posts"></ion-nav-view> 

Finally, some settings in the controllers:

 $scope.create = function() { $state.go('tab.newpost'); }; $scope.close = function() { $state.go('tab.posts'); }; 

As I said in my previous answer and comments ... $state.go() is the only correct way to use ionic or ui-router

Check that everyone here is the final note. I did just navigation between tab.posts ... tab.newpost ... the rest would be like

Answer 2

Using <a> with href instead of <button> solves my problem.

 <ion-nav-buttons side="secondary"> <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a> </ion-nav-buttons> 

Answer 3

You might think that you should change the call to $state.go() . As described here:

• $ state.go (to [, toParams] [, options])

The missing parameter must consist of a state name

 $scope.create = function() { // instead of this //$state.go("/tab/newpost"); // we should use this $state.go("tab.newpost"); }; 

Some refer to doc (the first parameter to [$state.go(to \[, toParams\] \[, options\] ):

at

Absolute state string name or relative state path

The name of the state to be transferred to or the relative state path. If the path starts with ^ or. then it is relative, otherwise it is absolute.

Some examples:

 $state.go('contact.detail') will go to the 'contact.detail' state $state.go('^') will go to a parent state. $state.go('^.sibling') will go to a sibling state. $state.go('.child.grandchild') will go to a grandchild state. 

Answer 4

 app.controller('NavCtrl', function ($scope, $location, $state, $window, Post, Auth) { $scope.post = {url: 'http://', title: ''}; $scope.createVariable = function(url) { $window.location.href = url; }; $scope.createFixed = function() { $window.location.href = '/tab/newpost'; }; }); 

HTML

 <button class="button button-icon ion-compose" ng-click="createFixed()"></button> <button class="button button-icon ion-compose" ng-click="createVariable('/tab/newpost')"></button> 

Answer 5

If you just want to go to another page, then you may need a link that looks like a button with href as follows:

 <a href="/#/somepage.html" class="button">Back to Listings</a> 

Hope this helps.