为什么 Angular 会尝试将 {{string}} 解析为表达式({string}）

Why would Angular try to parse {{string}} as an expression ({string})?

本文关键字：string 表达式 Angular 为什么      更新时间：2024-04-02

如果我错过了一些明显的东西，请道歉。我看过类似的问题，但这通常归结为有人在不应该使用{{...}}的地方，但我只是看不出在这种情况下出了什么问题。

我正在尝试实现 Angular 自动完成/提前输入 (angucomplete-alt(，但我遇到了一个特殊的问题。它完全按照作者的描述实现，但 Angular 在控制台中抛出以下错误：

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{placeholder}}] starting at [{placeholder}}]. http://errors.angularjs.org/1.5.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bplaceholder%7D%7D&p4=%7Bplaceholder%7D%7D at angular.1.5.3.min.js:68 at Object.AST.throwError (angular.1.5.3.min.js:14006) at Object.AST.object (angular.1.5.3.min.js:13993) at Object.AST.primary (angular.1.5.3.min.js:13899) at Object.AST.unary (angular.1.5.3.min.js:13887) at Object.AST.multiplicative (angular.1.5.3.min.js:13874) at Object.AST.additive (angular.1.5.3.min.js:13865) at Object.AST.relational (angular.1.5.3.min.js:13856) at Object.AST.equality (angular.1.5.3.min.js:13847) at Object.AST.logicalAND (angular.1.5.3.min.js:13839)

奇怪的是，该指令似乎没有做任何特别的事情。占位符作为placeholder: '@'传入，然后在指令模板中作为placeholder="{{placeholder}}"输出。据我所知，这是正确的。

我已将angucomplete-alt声明为我的主应用程序模块的依赖项。这就是在我的视图中设置自动完成的方式(作者第一个演示的精确副本，带有selected-object，local-data更改为绑定来自我的控制器的数据：

<div ng-controller="RosterController as roster">
    <div angucomplete-alt id="ex1"
         placeholder="Search crew"
         maxlength="50"
         pause="100"
         selected-object="roster.selectedCrew"
         local-data="roster.crew"
         search-fields="name"
         title-field="name"
         minlength="1"
         input-class="form-control form-control-small"
         match-class="highlight">
    </div>
</div>

这是我控制器的相关部分：

angular
    .module('aa.roster')
    .controller('RosterController', RosterController);
function RosterController () {
    var vm = this;
    vm.crew = [
        { name: 'abc', id: 1 },
        { name: 'def', id: 2 },
        { name: 'ghi', id: 3 }
    ];
}

我确实尝试回退到 Angular 1.4.6(作者在演示页面上使用的版本(，但同样的错误仍然存在。

是什么导致 Angular 尝试将{{placeholder}}解析为单个大括号表达式，而不仅仅是输出字符串？

我现在已经解决了这个问题。第三方模块正在影响$templateCache加载模板的方式，它要么尝试加载与 angucomplete-alt 模块中提供的模板不同的模板，要么正在影响模板的解析方式。

删除第三方模块可解决此问题。

相关文章：