有人可以幫助我，我對AngularJs代碼感到困惑

Question

其實我在網頁上使用分頁，我把一個條件ng-if =“ id！== 0”如果此代碼為true，那么它將隱藏某些部分，如果其為false則表明該部分。我的問題是條件是否為false然后顯示該部分，但是當我單擊下一步時，分頁不起作用。但是如果我在ng-show中使用相同的條件，則顯示其正常的分頁也有效。請幫助我怎么辦在那里我無法理解。 這是我的代碼。

<div class="orphan-navigation col-md-12" ng-show="totalOrphans !== 0">
                <div class="col-md-2 pull-left orphan-count">
                    {{id}} / {{totalOrphans}}
                </div>
                <div class="navigation-button-container pull-right">
                    <uib-pagination total-items="totalOrphans" ng-model="id" max-size="limitPages" ng-change="orphanChanged()" items-per-page="1">
                    </uib-pagination>
                </div>
            </div>
            <div class="col-md-12 orphan-text-label" ng-show="totalOrphans !== 0">
                <div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
                <div class="col-xs-4 small-left-margin label orphan-key searchText">{{orphanData.orphan.attributes.text}}</div>
            </div>

在上面的代碼中，我使用ng-show =“ totalOrphans！== 0”進行ng-show時，我的分頁效果很好，當我單擊下一步按鈕時，它突出顯示了其他words。那是我想要的結果。

但是，如果我使用ng-if而不是ng-show，則我的分頁不起作用，當我單擊next時，它不會突出顯示下一個單詞。

我在這里附上我網頁的圖片。

如果有人仍然不明白我的問題，請在這里評論，我會盡力向您澄清一下，

Answer 1

ng-if將創建自己的范圍。 uib-pagination也會創建它自己的范圍，並可能使用其父范圍來創建您的分頁。 現在，如果ng-if具有自己的作用域，則uib-pagination不能使用控制器中的作用域參數。 因此，存在ControllerAs語法。 要使用它，您需要在ng-controller中定義它，例如： ng-controller="AppCtrl as vm" 。 在控制器內部，您需要使用“ this”定義“ vm”：

app.controller('AppCtrl', [function() {
    var vm = this
    vm.id = 5;
}]);

現在，您可以像下面這樣在HTML內使用id：

<div ng-controller="AppCtrl as vm">
    <span>{{vm.id}}</span>
</div>

例如，您提供的帶有ng-if代碼如下所示：

<div class="orphan-navigation col-md-12" ng-if="vm.totalOrphans !== 0">
    <div class="col-md-2 pull-left orphan-count">
        {{vm.id}} / {{vm.totalOrphans}}
    </div>
    <div class="navigation-button-container pull-right">
        <uib-pagination total-items="vm.totalOrphans" ng-model="vm.id" max-size="vm.limitPages" ng-change="vm.orphanChanged()" items-per-page="1">
        </uib-pagination>
    </div>
</div>
<div class="col-md-12 orphan-text-label" ng-if="vm.totalOrphans !== 0">
    <div class="col-sm-3 label label-default pull-left orphan-key">Un-Annotated word</div>
    <div class="col-xs-4 small-left-margin label orphan-key searchText">{{vm.orphanData.orphan.attributes.text}}</div>
</div>