AngularJS模板的奇怪问题答案

【问题标题】：Strange issue with AngularJS templateAngularJS模板的奇怪问题
【发布时间】：2014-10-31 19:02:32
【问题描述】：

我在使用 Angularjs 时遇到了一个非常奇怪的问题，我正在使用一个指令，在该指令中我在页面上定义了一个内联模板，如下所示：

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

但是，我收到了这个奇怪的错误：

>  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

现在，如果我真的在模板中添加一些东西，例如像这样的任何随机字符：

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

然后错误消失，一切正常。

PS：请注意，我从 {{}} 改为 {[]} 以避免与 Twig 的语法冲突

编辑：

为了响应插值问题，我已经使用了：

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

这还不够吗。如果这不起作用，为什么在其中添加一个随机字符“a”会有所帮助？

编辑 2：

Plunker 已添加：

请检查此链接以获取工作代码：

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

请检查此链接以获取无效代码：

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

【问题讨论】：

Angular 期望 {{}}。
更新了我的问题，谢谢。
可以提供plnkr或者jsfiddle吗？
plnkr 按要求添加

标签： angularjs

【解决方案1】：

Angular 期望 {{}} 用于插值。

为避免冲突，您可以使用ng-bind:

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

但是，我从未尝试过使用<script> 标签。

【讨论】：

【解决方案2】：

这是当前版本 Angular JS (1.2.x) 的已确认问题

我在这里提交了一张票：

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

【讨论】：