AngularJS ng-click vs ui-sref transition

Issue

I am trying to transition a user from the landing page to a user page. It works fine with ui-sref. However, if I change it to ng-click="go('menu.home')", it stops working. When I click on the link, it does not do anything. Is there some kind of option/setting that I am missing?

The state

.state('menu', {
        url: '/menu',
        abstract: true,
        views: {
            "header@": {
                templateUrl: '/Navigation/AuthenticateHeader',
                controller: 'AuthenticateHeader'
                //    function ($scope) {
                //    $scope.message = 'Navigation Header.'
                //}
            },
            "content@": {
                templateUrl: '/Landing/Home',
                controller: function ($scope) {
                    $scope.message = 'Home page';
                }
            },
            'landingnav@menu': {
                templateUrl: '/Landing/AuthHeader',
                controller: function ($scope) {
                    $scope.message = 'Landing Header';
                }
            },
            'landingcontent@menu': {
                templateUrl: '/Landing/Index',
                controller: function ($scope) {
                    $scope.message = 'Landing Header';
                }
            }

        }
    })
    .state('menu.home',
    {
        url: '/home',
        views: {
            'landingnav@menu': {
                templateUrl: '/Landing/AuthHeader',
                controller: function ($scope) {
                    $scope.message = 'single message';
                }
            },
            'landingcontent@menu': {
                templateUrl: '/Landing/Index',
                controller: function ($scope, UserOptionsFactory) {
                    var options = UserOptionsFactory.CheckOptions;
                    console.log(options);
                    if (options !== null) {
                        $scope.isAdministrator = options.isAdministrator;
                    }
                }
            }
        }
    })

The link with ui-sref and ng-click

<li ng-click="go('menu.home')">
    <i class="fa fa-5x fa-User"></i>
    <span>User</span>
</li>

<li>
    <a ui-sref="menu.home">
        <i class="fa fa-5x fa-User"></i>
        <span>User</span>
    </a>
</li>   

Solution

You need to call the UI-Route go function in the controller, not the HTML.

ui-sref

According to UI-Router, ui-sref is a directive. When you bind ui-sref with <a> tag, it does state transition binding for you and automatically triggers the state that you assign for. In your case, it will transition to menu.home. That’s why using ui-sref = menu.home works for you.

$state.go()

$state.go() is a function which you have to trigger in controller, service and other JS file, but not HTML. When you want to performance state transition in the controller side, you need to inject $state to the controller.

HTML

<li ng-click="go('menu.home')">
  <i class="fa fa-5x fa-User"></i>
  <span>User</span>
</li>

Controller.js

/*  
 *  Create a function in controller called go with parameter
 *  This function will trigger state transition with assigned parameter
 *  In this case, the transition state is menu.home
 */
$scope.go = function(state) {
  $state.go(state);
}

Answered By – Shaohao

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.