Question

我是角色的新手，我正在尝试使用ng-switch在bootstrap模式中使用include动态加载模板，但点击似乎不起作用。我在这做错了什么？

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>

无法使ng-switch工作

1 个答案: