Strange issue with AngularJS template

Question

I'm getting a very very strange issue with Angularjs, I'm using a directive where I defined an inline template on page like this:

<script type="text/ng-template" id="breadcrumb.html"> {[ state.current.displayName ]} </script>

However, I'm getting this weird error:

>  Error: JSON.parse: expected property name or '}'
> fromJson@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1035
> @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6926
> transformData/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6901
> forEach@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:302
> transformData@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:6900
> transformResponse@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:7570
> qFactory/defer/deferred.promise.then/wrappedCallback@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10905
> qFactory/ref/<.then/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:10991
> Scope.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11906
> Scope.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:11734
> Scope.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:12012
> bootstrap/doBootstrap/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1299
> invoke@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:3697
> bootstrap/doBootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1298
> bootstrap@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1311
> angularInit@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:1260
> @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js:20534
> x.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> x.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4
> q@http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js:4

Now, if I actually add something into the template, for example any random character like this:

<script type="text/ng-template" id="breadcrumb.html"> a{[ state.current.displayName ]} </script>

Then the error goes away, everything renders fine.

PS: Note that I changed from {{}} to {[]} to avoid syntax conflict with Twig

Edit:

In respond to the interpolate issue, I already use:

angular.module('myapp', []).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{[').endSymbol(']}');
    }
);

Shouldn't this be enough. And if that doesn't work, the why does putting a random character 'a' to it helps?

Edit 2:

Plunker added:

Please check this link for working code:

http://plnkr.co/edit/OQiJovrNzOraJdsSXeSY?p=preview

Please check this link for non-working code:

http://plnkr.co/edit/IzGpTdnqmO5MxtldnKec?p=preview

Angular expects {{}}.

Davin Tryon
– Davin Tryon

2014-01-12 17:10:36 +00:00
Commented Jan 12, 2014 at 17:10 — Davin Tryon
– Davin Tryon, Commented Jan 12, 2014 at 17:10
Can u provide plnkr or jsfiddle?

allenhwkim
– allenhwkim

2014-01-12 18:53:55 +00:00
Commented Jan 12, 2014 at 18:53 — allenhwkim
– allenhwkim, Commented Jan 12, 2014 at 18:53
plnkr added as requested

mr1031011
– mr1031011

2014-01-13 03:57:28 +00:00
Commented Jan 13, 2014 at 3:57 — mr1031011
– mr1031011, Commented Jan 13, 2014 at 3:57

Davin Tryon · Accepted Answer · 2014-01-12 17:13:31Z

1

Angular expects {{}} for interpolation.

To avoid conflicts you can use ng-bind:

<script type="text/ng-template" id="breadcrumb.html" ng-bind="state.current.displayName"></script>

But, I've never tried it with a <script> tag though.

answered Jan 12, 2014 at 17:13

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

Comments

mr1031011 · Accepted Answer · 2014-01-22 17:05:04Z

0

This is a confirmed issue of the current version of Angular JS (1.2.x)

I have submitted a ticket here:

https://github.com/angular/angular.js/issues/5756

answered Jan 22, 2014 at 17:05

mr1031011

3,8528 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

Strange issue with AngularJS template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related