CODEWITHSUNDEEP
angularjs
hollyquinn
hollyquinn

Reputation: 652

AngularJS redirect to view on button click

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.

Upvotes: 0

Views: 2144

Answers (3)

Tina
Tina

Reputation: 1234

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>

Upvotes: 3

prince jain
prince jain

Reputation: 3

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

Upvotes: 0

Dvir
Dvir

Reputation: 3339

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>

Upvotes: 0

Related Questions