How to navigate to a state inside a custom directive?

Question

I'm trying my hand in writing custom directives and ran into a problem.

I'm implementing a ANCHOR BUTTON directive, through which I can assign values for ICON, TEXT and STATE(UI-SREF)

HTML template

<v-anc-btn-get state="profile({ id: editor.profileId })" text="Get Profile" icon="fa-book">
</v-anc-btn-get>

DIRECTIVE

function anchorButtonDirective() {
    var directive =
    {
        restrict: "E",
        template: "<a class='btn btn-info' ui-sref='ctrl.go()'><i class='fa {{ctrl.icon}}'></i> {{ctrl.text}}</button>",
        scope:
            {
                icon: "@",
                text: "@",
                state: "&"
            },
        controller: function ($state, $stateParams) {
            var ctrl = this;

            ctrl.go = function () {
                return ctrl.state;
            }
        },
        controllerAs: "ctrl",
        bindToController: true
    };

    return directive;
}

Now, the directive throws an error like Could not resolve 'go' from state 'xxx.xx'

What am I doing wrong here?

How do I fix it?? so that I can navigate to the state which I have specified in the directive?

Thanks for the help

EDIT 1

Edited as per @DanielC's comments.

I haven't tested anything yet but you're using var ctrl = this;. but you're just calling go() without the ctrl.go(). Also, your function is changing the state not returning a state. once it's called correctly I think it'll just change the state once loaded. instead I would: return ctrl.state; — DanielC, Mar 12 '16 at 04:52
@DanielC - Thanks for your valuable inputs. But, still the problem persists. — Karthik, Mar 12 '16 at 05:40
I think you can only pass "editor.profileId" into directive. then construct the state in the directive template. — yukuan, Mar 12 '16 at 06:54
@yukuan - Thanks for the suggestion. It was valid one and helpful too. Being a directive, I will using in multiple places and the stateParams values differs for each and every time I use.So, it would be tough to send the stateParams values as you may know the param name. — Karthik, Mar 12 '16 at 07:09
I'm working on to put the jsfiddle for the above code. Give me sometime — Karthik, Mar 12 '16 at 07:10

score 2 · Answer 1 · answered Mar 12 '16 at 08:14

You could specify which state you want to go to in the ui-sref attribute as an expression rather than a calling a function.

It can be done either by binding the ui-sref attribute to the scope variable ui-sref='{{state}}' or by calling the controller go function using ng-click. You can use $state service in your controller function to navigate to the required state by calling the $state.go function.

var directive =
    {
        restrict: "E",
        template: "<a class='btn btn-info' ng-click='ctrl.go()'><i class='fa {{ctrl.icon}}'></i> {{text}}</button>",
        scope:
            {
                icon: "@",
                text: "@myText",
                state: "@state"
            },
        controller: function ($scope,$state, $stateParams) {
            var ctrl = this;
            ctrl.state = $scope.state;
            ctrl.go = function () {
                $state.go(ctrl.state);
            }
        },
        controllerAs: "ctrl",
        bindToController: true
    };

    return directive;

Here is a working fiddle.

Thanks. Your solution was helpful. But, how do I send the _`stateParams`_ values to the _`ui-sref`_. Being a directive, I would use it in multiple places and also they stateParams values can be _`id`_, _`profileId`_ etc etc. Have to handle these scenarios as well. — Karthik, Mar 14 '16 at 03:29
See if this helps : http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller — Midhun Darvin, Mar 14 '16 at 18:17

How to navigate to a state inside a custom directive?

1 Answers1