Get "TypeError: Cannot read property 'match' of undefined" when using ng-attr-ui-sref

[sharpmachine]

Hi there,

I only want to add the ui-sref attribute IF {{item.state}} is defined. That's what ng-attr is for. But when I use it on on ui-sref, like so ng-attr-ui-sref={{item.state}}, it works great in the DOM but in the console I get TypeError: Cannot read property 'match' of undefined. It only throws this error when I use ng-attr on ui-sref.

<div class="list-group">
  <a 
        ng-attr-ui-sref="{{item.state}}" 
        ng-repeat="item in dynamicPopover.items" 
        ng-attr-ng-click="item.click($event, object.id)" 
        class="list-group-item">
    <i class="fa fa-{{item.icon}}"></i>
    {{item.title}}
    <paper-ripple fit></paper-ripple>
  </a>
</div>

Full Error

TypeError: Cannot read property 'match' of undefined
    at parseStateRef (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4015:22)
    at link (http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4100:17)
    at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7768:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7120:13)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7120:13)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7763:24)
    at delayedNodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8016:11)
    at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13) <a ng-attr-ui-sref="{{stateName}}" class="card-header">

Any ideas?

[eddiemonge]

What versions are you using because I don't see that when I try it.

[sharpmachine]

v0.2.14

[eddiemonge]

can you upgrade to 0.2.15? Also what version of Angular?

[sharpmachine]

Yes I'll upgrade. My angular versions is v1.3.15

[sharpmachine]

I just upgraded to the latest version of UI-Router and am still getting the error.

[eddiemonge]

can you post a plnkr showing this please?

[sharpmachine]

Sure. Here ya go: http://embed.plnkr.co/pi8WcloKeXUOnOWUK8Th/preview

So if you look at the directive I can either pass in a click function using clickFn or pass in a state using stateName. I'd only use one, and which I use depends on the situation. That's why I'm using ng-attr.

Thanks for your help @eddiemonge

[eddiemonge]

thats an odd interaction. I can see whats causing the error but not entirely sure why

[sharpmachine]

What is an odd interaction? The way I coded it? I'm still learning Angular so if there's a better way to do what I'm trying to do can you point me in the right direction?

Thanks again!

[eddiemonge]

Not the way you coded it but the way the pieces are interacting. I can add ng-attr-ui-sref in my app and it works fine. I'd have to dig into your example more to find out why it doesnt work. One thing is that you arent passing the stateName into the directive in the example.