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>