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

2 个答案: