AngularJS ngHref inside ngRepeat doesn't evaluate value

Question

I have the following markup:

<ul ng-if="item.children.length && item.open" class="fadeIn">
    <li ng-repeat="child in item.children" ng-show="child.visible">
        <a ng-href="#/{{ child.link }}">
            <span ng-bind-html="child.title"></span>
        </a>
    </li>
</ul>

The result, when the controller runs is a LI element containing a link, which contains a span, for each item in the list, which is the expected result.

The problem is that when clicking the link, nothing happens since the link is empty (#/). It is as if {{ child.link }} is not evaluated.

If i hardcode my preferred link (#/whatever), the routeProvider picks it up and it works.

I have even changed the name of the link parameter, to no avail. The scope menu structure contains a 'link' parameter for each menu.

There are no error in the console

Why isn't {{child.link}} evaluated?

If the expression was not evaluated, the link would be `#/{{ child.link }}`. Since you have `#/`, it is evaluated, and the result of the evaluation is an empty string. That means the `child.link` is an empty string, or null, or undefined. — JB Nizet, Jul 25 '15 at 13:25
Can you create a **[plunker](http://plnkr.co/)**? recreate the problem. — ryeballar, Jul 25 '15 at 13:25
I would expect that `{{child.link}}` is evaluated. But are you sure that, child.link has text in it. Perhaps you insert a second span bound to child.link. `` to see if it is assigned. — Peter Paul Kiefer, Jul 25 '15 at 13:26
Sorry I made a fault. not {{child.title}} I meant {{child.link}},. Sorry again! — Peter Paul Kiefer, Jul 25 '15 at 13:30

score 1 · Accepted Answer · answered Jul 25 '15 at 13:41

This is the 2nd time i have been had like this. This code is within a django template, and i have forgotten to use a verbatim tag. That means that Django will evaluate the expression to nothing before angular can have a chance to process this.

Thanks for all your help, D.

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

I've created a JSFIDDLE and made your code work:

<div ng-app='app' ng-controller='ctrl'>
    <ul ng-if="item.children.length && item.open" class="fadeIn">
        <li ng-repeat="child in item.children" ng-show="child.visible"> <a ng-href="#/{{ child.link }}">
            <span ng-bind-html="child.title"></span>
        </a>   
        </li>
    </ul>
</div>

angular.module('app', []).
controller('ctrl', function ($scope, $sce) {
    $scope.item = {
        open: true,
        children:[{
            visible: true,
            link: 'MyFirst',
            title: $sce.trustAsHtml('<h1>First</h1>')
        }]
    }
});

The only problem I had was with ng-bind-html. Check out this post.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 25 '15 at 13:28

Amir Popovich

29,350
9
53
99

I can see that your fiddle works, as far as i can see it's identical to my code, which is very frustrating since this is basic stuff. There is no html in my example, so $sce is not needed, but it still isn't working. – sm0ke21 Jul 25 '15 at 13:33
@sm0ke21 Sometimes one uses lnk as attribute in the item and link in html. To see such a misspelling is hard. And Javascript does not show you an error because the value of link is undefined which is translated to "" by angular. – Peter Paul Kiefer Jul 25 '15 at 13:36
@PeterPaulKiefer i included that 2nd span with a binding to child.link and it works. I have also changed the property name to something else. the ngBind works, but ngHref still doesn't – sm0ke21 Jul 25 '15 at 13:39
That's strange. Did you use something like handlebars templating wich also uses {{ }} as start and begin marks for its replacements? – Peter Paul Kiefer Jul 25 '15 at 13:46
@PeterPaulKiefer That's exactly what's happening. I have answered my own question (further up) but i cannot accept it for another 2 days. – sm0ke21 Jul 25 '15 at 13:47
@sm0ke21 Sorry, I've seen your answer to late! – Peter Paul Kiefer Jul 25 '15 at 13:47

AngularJS ngHref inside ngRepeat doesn't evaluate value

2 Answers2