从指令 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="#">{{page.Name}}</a>

至

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

在 ng-click 中，您可以直接访问 page 变量，不需要大括号。也就是说，你猜对了。

Answer 2

在这一行中：

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

您需要将其更改为：

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

原因是 ng-click 需要一个 Angular expression，这是在点击时计算的。双花括号不代表有效的表达式标记，Angular 抱怨它，引发错误。

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

从指令 templateUrl 解析语法错误 ng-click

parse syntax error ng-click from directive templateUrl

angularjs

angularjs-directive

angularjs-ng-click