"Error: Syntax Error unexpected token" in custom Angular Directive attributes

Question

I'm testing out angular & trying to build a custom angular directive, but I'm running into weird console errors.

My directive is defined as:

.directive('ipRecentActivityItem', function() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    scope: {
      'title': '@title',
      'icon': '@icon',
      'timeago': '@timeago',
      'meta': '@meta',
    },
    templateUrl: IP_PATH + '/app/components/recent-activity/recent-activity-item.tpl.html'
  }
});

My template is:

<div class="recent-activity-item">
  <div class="recent-activity-content">
    <div class="recent-activity-message">
      <a href="" class="recent-activity-title">
        {{title}}
      </a>
      <div class="recent-activity-meta">
        {{meta}}
      </div>
      <div data-ng-transclude></div>
    </div>
  </div>
  <a href="" class="recent-activity-timeago">{{timeago}}</a>
</div>

Then, in my view, I'm trying to call it with:

<div data-ip-recent-activity-item 
  title="My Item Title" 
  icon="My item icon" 
  timeago="4 hours ago" 
  meta="someone commented on an issue in garageband">
  My Item content
</div>

In the rendered page, everything is showing as it should, but the console is throwing these types of errors: Error: Syntax Error: Token 'Item' is an unexpected token at column 4 of the expression [My Item Title] starting at [Item Title].

If I get rid of the spaces, the error goes away, but I don't understand why that is. Can anyone enlighten me? Thanks! I'm still new to the angular arena, be kind! :)

EDIT: Forgot to mention I'm running angular version 1.1.5

Jason More · Accepted Answer · 2013-07-17 18:44:48Z

13

I'm pretty sure its because angular tries to evaluate the bits in the quotes. Try adding single quotes and see if the message goes away

<div data-ip-recent-activity-item 
  title="'My Item Title'" 
  icon="'My item icon'" 
  timeago="'4 hours ago'" 
  meta="'someone commented on an issue in garageband'">
  My Item content
</div>

answered Jul 17, 2013 at 18:44

Jason More

7,0937 gold badges45 silver badges53 bronze badges

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

2 Comments

matthewsimo Over a year ago

Thanks for responding, turns out angular aggressively caches the directive templates and wouldn't let go of an out of date version that threw those errors, no idea why it would still render properly on the page though.. Tricky stuff --- Note: that I've updated the initial question with my solution, since I'm too much of a nub to answer my own question for another 7 hours....

Zachary Dahan Over a year ago

This helped me when I wanted to put a link in a attribute's directive. thanks !

Andrew Barber · Accepted Answer · 2014-01-22 17:51:33Z

0

Ok, so I think this was related to angular caching the template aggressively.

I had tried playing around adding an ng-show on the elements by passing in the attributes ( {{title}}, etc..). This borked somethings, so I removed it. I think angular was still using the cached version when looking up the template which threw the errors, but it was still able to render properly. The above code works just fine! Trixy!

For reference, I'm using the following template now:

<div class="recent-activity-item">
  <div class="recent-activity-content">
    <div class="recent-activity-message">
      <a href="" class="recent-activity-title" data-ng-hide="title === ''">
        {{title}}
      </a>
      <div class="recent-activity-meta" data-ng-hide="meta === ''">
        {{meta}}
      </div>
      <div data-ng-transclude></div>
    </div>
  </div>
  <a href="" class="recent-activity-timeago" data-ng-hide="timeago === ''">{{timeago}}</a>
</div>

edited Jan 22, 2014 at 17:51

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

answered Jul 18, 2013 at 14:48

matthewsimo

511 gold badge1 silver badge6 bronze badges

4 Comments

Soviut Over a year ago

The edit should actually be in this answer, not in the original post.

JPRO Over a year ago

You should accept the answer that fixed the issue (Jason More's), not edit your question with the answer

Andrew Barber Over a year ago

I've moved the answer you posted out of the question, and edited it into here for you. Please be sure to do it that way in the future.

Deke Over a year ago

If anyone else runs into this syntax-error-unexpected-token it can be as simple as a syntax error- spelling wrong or commas missing... Just now happened to me.

Collectives™ on Stack Overflow

"Error: Syntax Error unexpected token" in custom Angular Directive attributes

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related