angular ui router directive dynamically ui-sref - angularjs

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