AngularJS：ng-repeat 中的范围

Question

我正在尝试动态地 ng-include 一些部分。我意识到可能还有其他方法可以做到这一点，但我想了解为什么这种方法不起作用。

我有一个这样定义的控制器：

auditApp.controllerModule.controller('LayoutCtrl', ['$scope',
    function (scope) {
        scope.index1={
            pages:[
                'views/subpage1.html',
                'views/subpage2.html',
                'views/subpage3.html',
                'views/subpage4.html'
        ]};
    }
]);

如果我执行我的代码的静态版本，一切正常：

<div ng-controller="LayoutCtrl">
    <div class="row" ng-init="pob={pageidx:0}">
        <div class="span1">
            <ul class="nav nav-tabs nav-stacked">
                <li><a ng-click="pob.pageidx=0">0</a></li>
                <li><a ng-click="pob.pageidx=1">1</a></li>
                <li><a ng-click="pob.pageidx=2">2</a></li>
                <li><a ng-click="pob.pageidx=3">3</a></li>
            </ul>
        </div>
        <div class="span11">
            <ng-include src="index1.pages[pob.pageidx]"></ng-include>
        </div>
    </div>
</div>

但是，如果我尝试使用 ng-repeat 复制它，它会默默地失败：

<div ng-controller="LayoutCtrl">
    <div class="row" ng-init="pob={pageidx:0}">
        <div class="span1">
            <ul class="nav nav-tabs nav-stacked">
                <li ng-repeat="n in index1.pages"><a ng-click="pob.pageidx={{$index}}" >{{$index}}</a></li>
            </ul>
        </div>
        <div class="span11">
            <ng-include src="index1.pages[pob.pageidx]"></ng-include>
        </div>
    </div>
</div>

同样，在这个示例中，遍历一个数组并仅使用 $index 并没有多大意义，但让我感到困惑的是底层范围的断开连接。谁能给我建议？

Answer 1

ngClick 期待一个 Angular 表达式。你不应该在那里使用插值。它应该是：

<a ng-click="pob.pageidx=$index">{{$index}}</a>

http://plnkr.co/edit/ZSPdaqR6WrRh9rbP7vUU?p=preview