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
– JB Nizet, Commented Jul 25, 2015 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. <span ng-bind="child.title"></span> to see if it is assigned. — Peter Paul Kiefer
– Peter Paul Kiefer, Commented Jul 25, 2015 at 13:26

sm0ke21 · Accepted Answer · 2015-07-25 13:41:58Z

1

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.

answered Jul 25, 2015 at 13:41

sm0ke21

5915 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:51:35Z

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, 2017 at 11:51

CommunityBot

11 silver badge

answered Jul 25, 2015 at 13:28

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

6 Comments

sm0ke21 Over a year ago

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.

Peter Paul Kiefer Over a year ago

@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.

sm0ke21 Over a year ago

@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

Peter Paul Kiefer Over a year ago

That's strange. Did you use something like handlebars templating wich also uses {{ }} as start and begin marks for its replacements?

sm0ke21 Over a year ago

@PeterPaulKiefer That's exactly what's happening. I have answered my own question (further up) but i cannot accept it for another 2 days.

|

Collectives™ on Stack Overflow

AngularJS ngHref inside ngRepeat doesn't evaluate value

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related