Converting angularjs menu directives to support ui.router

Question

I found a nice hover menu implementation online. it works great for assigning hrefs. I wanted to convert it to work with ui.router states and sref.

I added a href and sref value on the menu data object.

Where it generates and compliled the html I changes {{node.href}} to "{{ $state.href(node.sref)}}"

but the output generated the "{{ $state.href(node.sref)}}" appears just as I wrote it , it's not evaluating.

Is this because in that context $state is not defined? If so how do I define it?

If not can you tell me why it's not evaluating?

My end goal was something like this: {{node.href ? node.href : $state.href(node.sref)}}

and if node.href is truthy, it works, but if href is uncompiled, the expression shows up undefined... so I know it's trying to evaluate that expression... I converted it to just "$state.href(node.sref)" to simplify it...

Also is there a way to see the errors generated during a $compile?

Any help is greatly appreciated, I'm pretty new to Angular and there are a lot of voids in my knowledge, so please feel free to ask stupid questions to verify my base understanding of the problem, and explain with little words :) I probably need that.

var app = angular.module('defaultApp');
app.controller('menuController', ['$scope', '$location', function ($scope, $location) {
            $scope.breadcrumbs = [];
            $scope.menu = [
                {
                    text: 'HOME',
                    href: '\default.html',
                    children: [
                        { text: 'Default', href: '\default.html' }
                    ]
                },
                {
                    text: 'start',
                    //href: '\default.html',
                    sref: 'start',
                    children: [
                        {
                            text: 'search',
                            //href: '/manage-people',
                            sref: 'search',
                            children: [
                                { text: 'search', sref: 'search' },
                                { text: 'start', sref: 'start' }
                            ]
                        }
                    ]
                },
                { text: 'MY INFO', href: '/my-info', sref: 'search' }
            ];
    /* Directives */
    app.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) {
            return {
                restrict: 'C',
                scope: true,
                link: function (scope, element, attrs) {
                    scope.selectedNode = null;
                    scope.$watch(attrs.menuData, function (val) {

                        var template = angular.element('<ul id="parentTreeNavigation"><li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{$state.href(node.sref)}}"  target="{{node.target}}" >{{node.text}}</a>{{node.click}}<sub-navigation-tree></sub-navigation-tree></li></ul>');

                        var linkFunction = $compile(template);
                        linkFunction(scope);
                        element.html(null).append(template);
                    }, true);
                }
            };
        }])
        .directive('subNavigationTree', ['$compile', function ($compile) {
            return {
                restrict: 'E',
                scope: true,
                link: function (scope, element, attrs) {
                    scope.tree = scope.node;
                    if (scope.tree.children && scope.tree.children.length) {
                        var template = angular.element('<ul class="dropdown "><li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeId + '}}  ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a "{{ $state.href(node.sref)}}"  target="{{node.target}}" >{{node.text}}</a><sub-navigation-tree tree="node"></sub-navigation-tree></li></ul>');

                        var linkFunction = $compile(template);
                        linkFunction(scope);
                        element.replaceWith(template);
                    }
                    else {
                        element.remove();
                    }
                }
            };
        }]);

Answer 1

You can't use ui-sref and href attributes at the same time. The whole idea of ui-sref is that is generates the href attribute for you.

A directive that binds a link (<a> tag) to a state. If the state has an associated URL, the directive will automatically generate & update the href attribute via the $state.href() method.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Edit after comments. ui-sref expects a statename as value, not an URL. Let say you've got the following state:

$stateProvider.state('myState', {
    url: '/myUrl',
    template: '<h1>Foobar</h1>',
    controller: [
                 '$scope',
        function ($scope) { ... }
    ]
});

If you want to create a link to that state using ui-sref do the following:

<a ui-sref="myState">Link</a>

The ui-sref directive will do the following to your a tag:

<a ui-sref="myState" href="/myUrl">Link</a>

It's all explained clearly in the link i posted above.