angularjs - 解析指令 templateUrl 中的语法错误 ng-click

Question

我正在开始一些 AngularJs 实践，我想基于 JSON 文件创建动态页面。

加载页面后出现以下错误:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.2/$parse/syntax?p0=%7B&p1=invalid%20key&p2=23&p3=SelectedPage.SetPage(%7B%7Bpage.Number%7D%7D)&p4=%7Bpage.Number%7D%7D)
at Error (native)
at http://localhost/AngularJs/scrpts/angular.min.js:6:416
at Object.q.throwError (http://localhost/AngularJs/scrpts/angular.min.js:209:32)
at Object.q.object (http://localhost/AngularJs/scrpts/angular.min.js:208:357)
at Object.q.primary (http://localhost/AngularJs/scrpts/angular.min.js:205:335)
at Object.q.unary (http://localhost/AngularJs/scrpts/angular.min.js:205:174)
at Object.q.multiplicative (http://localhost/AngularJs/scrpts/angular.min.js:204:434)
at Object.q.additive (http://localhost/AngularJs/scrpts/angular.min.js:204:261)
at Object.q.relational (http://localhost/AngularJs/scrpts/angular.min.js:204:96)
at Object.q.equality (http://localhost/AngularJs/scrpts/angular.min.js:203:425) <a ng-click="SelectedPage.SetPage({{page.Number}})" href="#"> 

问题出现在这个templateUrl:navigation.html

<nav>
<ul>
    <li ng-repeat='page in Pages'>
        <a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">{{page.Name}}</a>
    </li>
</ul>
</nav>

我的猜测是 {{ }} 语法在这里不被接受，但我不确定。

指令调用如下:

.directive('navigationPart', function(){
    return {
        templateUrl: 'components/navigation.html'
    };
})

我确实在 Html 中获取了这个元素代码，因此它在某种程度上满足了我的要求。

<nav>
<ul>
    <!-- ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
        <a ng-click="SelectedPage.SetPage(1)" href="#" class="ng-binding">Index</a>
    </li><!-- end ngRepeat: page in Pages --><li ng-repeat="page in Pages" class="ng-scope">
        <a ng-click="SelectedPage.SetPage(2)" href="#" class="ng-binding">Who</a>
    </li><!-- end ngRepeat: page in Pages -->
</ul>
</nav>

我想知道我做错了什么(为什么会抛出错误)...

Answer 1

在这一行:

<a ng-click='SelectedPage.SetPage({{page.Number}})' href="#">

您需要将其更改为:

<a ng-click='SelectedPage.SetPage(page.Number)' href="#">

原因是 ng-click 需要 Angular expression ，在点击时进行评估。双大括号不代表有效的表达式标记，Angular 会对此进行提示并引发错误。

如果您觉得这有点令人困惑，请记住双花括号语法 ({{...}}) 用于将模型值绑定(bind)到 DOM，而许多构建的-in 指令的工作方式有点不同 - 您不在那里绑定(bind)任何内容，而是需要提供一个表达式，然后在元素的范围内对其进行计算。