Question

如果我遗漏了一些明显的东西，请道歉。我已经查看了类似的问题，但这通常取决于使用{{...}}的人，他们不应该这样做，但我在这个例子中看不出有什么问题。

我正在尝试实现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声明为我的主app模块的依赖项。这就是在我的视图中设置自动完成的方式（作者第一个演示的完全复制品，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}}解析为单个大括号表达式而不是仅输出字符串？

Answer 1

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

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

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

1 个答案: