無法獲得ng開關工作

Question

我是新來的角，我試圖使用ng-switch動態加載模板使用包括在引導模式，但點擊似乎並沒有工作。我在這裏做錯了什麼？

HTML

ModalContent.html

<div ng-controller="Nav" class="modal-body"> 
    <div class="left-nav" ng-include="'LeftNav.html'"></div> 
    <div class="right-nav" ng-include="'RightNav.html'"></div> 
</div> 

LeftNav.html

<ul> 
    <li ng-repeat="item in items"> 
     <a href="#" ng-click="page='item'">{{ item }}</a> 
    </li> 
</ul> 

RightNav.html

<div ng-switch on="page"> 
    <div ng-switch-when="Item1"> 
     <div ng-include="'Item1.html'"></div> 
    </div> 
    <div ng-switch-when="item2"> 
     <div ng-include="'Item2.html'"></div> 
    </div> 
    <div ng-switch-when="item3"> 
     <div ng-include="'Item3.html'"></div> 
    </div> 
    <div ng-switch-default> 
     <h1>Default</h1> 
    </div> 
</div> 

JS

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']); 
app.controller('Nav', function($scope) { 
    $scope.items = ['Item1', 'Item2', 'Item3'];  
}) 

Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview

Answer 1

有一對夫婦的問題。

這裏是一個工作演示：http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview

評論在線：

控制器

app.controller('Nav', function($scope) { 
    $scope.items = ['Item1', 'Item2', 'Item3']; 
    $scope.page = $scope.items[0]; 
    $scope.selectItem = function (item) { 
     $scope.page = item; 
    } 

}) 

LeftNav模板

<ul> 
    <li ng-repeat="item in items"> 
     <!-- calling `selectItem` on the controller to set the `page` 
      otherwise `page` will be set on the current `ng-include` scope 
      and will be unavailable elsewhere --> 
     <a href="#" ng-click="selectItem(item)">{{ item }}</a> 
    </li> 
</ul> 

RightNav模板

<!-- 'page' is now from the 'Nav' controller's $scope --> 
<div ng-switch on="page"> 
    <div ng-switch-when="Item1"> 
     <div ng-include="'Item1.html'"></div> 
    </div> 
    <!-- String matches are case sensitive --> 
    <div ng-switch-when="Item2"> 
     <div ng-include="'Item2.html'"></div> 
    </div> 
    <!-- String matches are case sensitive --> 
    <div ng-switch-when="Item3"> 
     <div ng-include="'Item3.html'"></div> 
    </div> 
    <div ng-switch-default> 
     <h1>Default</h1> 
    </div> 
</div>