angular ui router directive dynamically ui-sref

Question

HTML

<li class="dropdown signals" signals="signals" data-nb-signals="" style="visibility: hidden;">
    <a data-toggle="dropdown" href="#">
    <i class="glyphicon glyphicon-inbox"></i><span class="badge">1</span>
    <b class="caret"></b></a>
    <ul class="dropdown-menu"></ul>
</li>

JS

.directive('nbSignals',function($compile,$interpolate) {
    return {
        restrict: 'A',
        scope:{
            signals:'='
        },
        link: function(scope, element) {
            var signals = scope.signals,
            num = signals.length,
            $dropdown = element.find('ul.dropdown-menu'),
            liTpl = [],
            i18n = {add_post:'nuovo articolo'};
            if(num > 0){
                element.css('visibility', 'visible');
                for(var i = 0; i < num; i++){
                    var current = signals[i];
                    var href = $interpolate('blog_details({id:{{_id}},slug:{{slug}}})')(current);
                    liTpl.push('<li><a data-ui-sref="'+href+'">'+i18n[current.label]+'</a></li>');
                }
                $dropdown.append($compile(liTpl.join(''))(scope));
            }    

        }
    };
});

Doing so i've got

Error: [$parse:syntax] Syntax Error: Token 'f9ccb520daa8c167b3431' is unexpected, expecting [}] at column 8 of the expression

I also tried with $state.href but I don't find the way to pass the value (I cannot use href beacuse of give me 404)

so what's the way ?

Answer 1

The exception here comes from the fact that the GUID is in fact a string. So we cannot handle it as a number, i.e. without apostrophe:'

so, because your current could look like this:

// the one of the $scope.signals
current {
  _id: '016ab73979797971605013efc42942e8',
  ...
}

we must change the parameter passing similar way, instead of this:

// GUID is not a number
var href = $interpolate('blog_details({id:{{_id}},slug:{{slug}}})')(current);

we must use: '{{_id}}'

// GUID is a string here
var href = $interpolate('blog_details({id:\'{{_id}}\',slug:{{slug}}})')(current);