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

Question

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

What is wrong with my code?
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.

you don't need the {{ }} here; the return value of the function isn't an expression that angular needs to evaluate. — Claies
– Claies, Commented Aug 28, 2015 at 15:06
If I remove the {{ }}, the content of the tooltip is "myCtrl.generateTooltip(region)" ;-) — luklapp
– luklapp, Commented Aug 28, 2015 at 15:08
Try the following (exactly): "'<b>HELLO WORLD!</b>'" (single quotes inside the double quotes). — David M. Karr
– David M. Karr, Commented Aug 28, 2015 at 15:10
@DavidM.Karr: Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context., although I am using $sce.trustAsHtml()... — luklapp
– luklapp, Commented Aug 28, 2015 at 15:17

Community · Accepted Answer · 2017-05-23 12:26:01Z

0

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.

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 28, 2015 at 15:11

Justin Schulz

5175 silver badges11 bronze badges

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

Comments

Ridham Tarpara · Accepted Answer · 2018-04-02 06:15:54Z

0

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.

answered Apr 2, 2018 at 6:15

Ridham Tarpara

6,1804 gold badges22 silver badges40 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related