0

一部のパーシャルを動的に 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 を使用するだけではあまり意味がありませんが、私を困惑させているのは、根底にあるスコープの切断です。誰でも私にアドバイスできますか？

4

1 に答える 1

2

ngClickAngular Expression が必要です。そこで補間を使用するべきではありません。単に次のようにする必要があります。

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

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

于 2013-04-23T23:42:01.950 に答える