CODEWITHSUNDEEP
angularjs
mr1031011
mr1031011

Reputation: 3812

Strange issue with AngularJS template

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

Upvotes: 0

Views: 295

Answers (2)

mr1031011
mr1031011

Reputation: 3812

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

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67316

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.

Upvotes: 1

Related Questions