Question

我对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

Answer 1

Angular期望{{}}进行插值。

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

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

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

Answer 2

这是当前版本的Angular JS（1.2.x）

的确认问题

我在这里提交了一张票：

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

AngularJS模板的奇怪问题

2 个答案: