AngularJS redirect to view on button click

Question

I'm trying to load a new view when a button is clicked. For some reason it isn't working with one of my paths. It will work with the path /lookup and will go to the lookup page, but when I change the path to /search it does nothing? I'm confused.

Here is my controller:

(function () {   
    'use strict'
    angular
        .module('crm.ma')
        .controller('navbarCtrl', function ($location) {

           var vm = this;

           vm.redirect = function () {
               $location.url('/search');
           }
       });
})();

Here is my button

<button class="btn default-btn advancedbtn" ng-click="redirect()">Advanced</button>

And here's part of my route file if that will help at all.

.state('index.topnavbar', {
            url: '/topnav',
            templateUrl: 'app/components/common/topnavbar.html',
            controller: 'navbarCtrl as vm'

        })
.state('index.search', {
            url: '/search',
            templateUrl: 'app/components/common/topnav_advancedmodal.html',
            controller: 'AdvancedSearchCtrl as vm',
            data: {
                pageTitle: 'Advanced Search'
            }

        })

If any other code is needed please let me know. Thanks.

the code seems to be fine. Can you post the code on jsFiddle? — Dvir
– Dvir, Commented Nov 6, 2015 at 15:04
@Dvir here is a jsFiddle. jsfiddle.net/50ap6g7f I'm not sure it will be of any use since I can't post all of my code there. — hollyquinn
– hollyquinn, Commented Nov 6, 2015 at 15:08

Tina · Accepted Answer · 2015-11-06 16:23:00Z

3

Do you get any errors in the console? Does your template exist? If Angular can't find your template it won't transition to the route. You can check the network requests and console for errors.

You could try using ui-sref:

<a ui-sref="index.search">Advanced</a>

If you prefer to keep the redirect method, can you add a console.log and do you see that log? If not then your scoping is off.

If so, and you prefer to keep your redirect method rather than use ui-sref (in case you want to check something before redirecting), you can inject $state into your controller and call the method:

$state.go('index.search');

Update to add to follow-up question

To help with your follow-up question of reloading if clicking once you're already there, according to the UI-Router documentation, you can specify the option to reload like this:

<a ui-sref="index.search" ui-sref-opts="{ reload: true }">Advanced</a>

edited Nov 6, 2015 at 16:23

answered Nov 6, 2015 at 16:08

Tina

1,26412 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hollyquinn Over a year ago

thanks for your help. ui-sref works, but I get the problem that once I'm on the search page, if I click the Advanced button a second time it doesn't reload the page. Is there a way to get it to load everytime the button is clicked>

hollyquinn Over a year ago

Tina you are amazing! It works perfectly! Can't thank you enough.

Dvir · Accepted Answer · 2015-11-06 15:05:21Z

0

Your call for redirect method are not in the scope. You have to change the redirect() to vm.redirect() in the html.

before:

<button class="btn default-btn advancedbtn" ng-click="redirect()">Advanced</button>

after:

<button class="btn default-btn advancedbtn" ng-click="vm.redirect()">Advanced</button>

answered Nov 6, 2015 at 15:05

Dvir

3,3382 gold badges23 silver badges34 bronze badges

2 Comments

hollyquinn Over a year ago

It still does not work even after I add the vm. It will work for other pages, it just won't redirect to my search page. I'm not sure what is wrong.

hollyquinn Over a year ago

When I debug it in firebug I'm getting this error Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

prince jain · Accepted Answer · 2015-11-06 15:09:36Z

0

This might help you When you alias controller with some name you need to use aliasName in your view change you code

  <button class="btn default-btn advancedbtn" ng-click="vm.redirect()">Advanced</button>

Refer: https://docs.angularjs.org/api/ng/directive/ngController

answered Nov 6, 2015 at 15:09

prince jain

32 bronze badges

Collectives™ on Stack Overflow

AngularJS redirect to view on button click

3 Answers 3

Update to add to follow-up question

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update to add to follow-up question

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related