AngularJS：ng-repeat在視圖後無法訪問範圍變量

Question

我已經爲選項卡創建了一個Angular JS腳本，並試圖訪問View中的以下範圍變量。但是，沒有成功。 Tab單擊工作正常，但以後無法打印selectedIndex變量。請幫忙。

這是代碼在我看來：

<nav id="App1" ng-app="navTab" ng-controller="NavTabController"> 
    <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a> 
</nav> 
{{selectedIndex}} 

這裏是角腳本：

<script> 
    var navTabModule = angular.module("navTab", []) 
    navTabModule.controller("NavTabController", function($scope) { 
    $scope.items = [ 
     {product_name: "dashboard"}, 
     {product_name: "contacts"}, 
     {product_name: "appointments"}, 
     {product_name: "todos"}, 
     {product_name: "transactions"}, 
     {product_name: "items"}, 
     {product_name: "calendar"}, 
     {product_name: "users"}, 
     {product_name: "reports"} 
    ]; 
    $scope.selectedIndex = 0; 
    $scope.itemClicked = function($index){ 
     $scope.selectedIndex = $index; 
    } 
    }); 
</script> 

Answer 1

您試圖訪問變量外範圍，之後是nav元素。

把結合內部範圍，或控制器移動到外部元件（使範圍更廣），以及它將工作：

<nav id="App1" ng-app="navTab" ng-controller="NavTabController"> 
    <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a> 
    {{selectedIndex}} 
</nav> 

或

<div ng-app="navTab" ng-controller="NavTabController"> 
    <nav id="App1"> 
     <a href="#" ng-repeat="item in items" ng-class="{'selected-class-name':$index == selectedIndex}" ng-click="itemClicked($index)">{{item.product_name}}</a> 
    </nav> 
    {{selectedIndex}} 
</div>