AngularJS ng-click vs ui-sref transition

Question

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>

How does your go() look like?

Ben Kauer
– Ben Kauer

2015-11-18 15:27:04 +00:00
Commented Nov 18, 2015 at 15:27 — Ben Kauer
– Ben Kauer, Commented Nov 18, 2015 at 15:27

Jan Papenbrock · Accepted Answer · 2018-08-13 12:21:31Z

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);
}

Collectives™ on Stack Overflow

AngularJS ng-click vs ui-sref transition

1 Answer 1

ui-sref

$state.go()

HTML

Controller.js

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ui-sref

$state.go()

HTML

Controller.js

Comments

Related