luklapp
luklapp

Reputation: 205

Angular: Error: [$parse:syntax] Syntax Error

I want to create tooltips in an ng-repeat with angular-tooltips. The content of the tooltips has to be dynamically. What I already have is something like this:

View:

<div ng-repeat="region in regions">
    <a tooltips tooltip-html="{{ myCtrl.generateTooltip(region) }}">HOVER</a>
</div>

Controller:

function generateTooltip(region) {
    // generate some html here
    var content = "<b>HELLO WORLD!</b>";
    return $sce.trustAsHtml( content );
}

The tooltip is shown and working, but I get the following error in console (which I don't want to see :-))

 Error: [$parse:syntax] Syntax Error: Token '<' not a primary
 expression at column 1 of the expression [<b>HELLO WORLD!</b>]
 starting at [<b>HELLO WORLD!</b>].
  1. What is wrong with my code?
  2. Is it possible to use a view as the tooltip instead of generating the HTML in the controller? There is an attribute tooltip-view, but I don't know how to pass my region variable to it.

Upvotes: 0

Views: 14083

Answers (2)

Ridham Tarpara
Ridham Tarpara

Reputation: 6160

You need to include angular-sanitize.js which sanitize inputs by parsing the HTML into tokens. All safe tokens (from a whitelist) are then serialized back to properly escaped HTML string. This means that no unsafe input can make it into the returned string.

Upvotes: 0

Justin Schulz
Justin Schulz

Reputation: 507

Someone else had a similar error resulting from a function running after the template was compiled by angular. Maybe this will set you in the right direction.

Upvotes: 0

Related Questions