CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
matthewsimo
matthewsimo

Reputation: 51

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

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

Upvotes: 1

Views: 10690

Answers (2)

matthewsimo
matthewsimo

Reputation: 51

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>

Upvotes: 0

Jason More
Jason More

Reputation: 7073

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>

Upvotes: 13

Related Questions