切换视图不会以角度切换控制器答案

【问题标题】：Switching views does not switch controller in angular切换视图不会以角度切换控制器
【发布时间】：2015-10-11 12:13:08
【问题描述】：

我有一个简单的 Angular 应用程序，它使用两个模板和控制器。放置了两个按钮来切换视图。它们调用在控件中定义的函数，该函数使用 window.location='' 来切换位置。

但是，如果我放置 ng-controller 指令，模板会更改，但控制器不会。但是，如果我只是删除 ng-controller 指令，则根本不会加载任何控制器，但会呈现默认视图。

怎么了？？这是我的代码：

HTML:

<body ng-app='schoolConnect' ng-controller='takeCtrl' >
 <div ng-show='loading' style='margin-top:100px' >
<!--content-->
</div> 
<table width=40% align='center' style='margin-bottom:10px' >
  <tr>
   <td align='center' > 

 <!-- BUTTONS THAT SWITCH THE VIEW -->
  <div class='btn-group' > 
   <button class='btn btn-lg' ng-class='take_btn' ng-disabled='isTaking' ng-click='takeAttend()' >
&nbsp;Take&nbsp;
   </button>
   <button class='btn btn-lg' ng-class='view_btn' ng-disabled='isViewing'  ng-click='viewAttend()' >
&nbsp;View&nbsp;
  </button>

   </div>
   </td>
 </tr> 
</table>
<table width=40% align='center' >
   <!-- Some content that contains ng-models and ng-binds -->
</table>

<!-- This table Contains the rendered views -->
<table align='center' class="table table-striped table-hover table-bordered table-condensed" style='width:60%' ng-view></table>

</body>

</html>

Javascript：

/*********************************
*>Apply controller to angular app**
 *>Define major functions **********
********************************/

//Initalize app
var app=angular.module('schoolConnect',['ngSanitize','ngRoute']);

//Define Views  

function configViews($routeProvider)
{
   $routeProvider
   //default view is Take Attendance
    .when('/take',{
      templateUrl: 'partials/takeAttendance.html', controller: "takeCtrl"
      })

     //View for tviewing attendance
     .when('/view',{
        templateUrl: 'partials/viewAttendance.html', controller: "viewCtrl"
        })

      .otherwise({
        redirectTo:'/take'
       });
 }

 //Assign Views
  app.config(configViews);



//Assign controllers

//Take Attendance-Controller
app.controller('takeCtrl',takeCtrl);

//Define Controller
function takeCtrl($scope,$http){
  $scope.pageTitle='Attendance';

  //************INITIALIZE SOME VARIABLES AS REQUIRED*****
  $scope.view_btn='btn-danger';
  $scope.take_btn='btn-default';
  $scope.isTaking=true;
  $scope.isViewing=false;

    //SOME MORE CODE HERE

  } //CONTROLLER 1 ENDS


 //View Attendace-Controller
 app.controller('viewCtrl',viewCtrl);

//Define Controller
function viewCtrl($scope,$http){
    $scope.pageTitle='Attendance';

   //************INITIALIZE SOME VARIABLES AS REQUIRED*****
    $scope.view_btn='btn-default';
    $scope.take_btn='btn-danger';
    $scope.isTaking=false;
    $scope.isViewing=true;

     //SOME MORE CODE HERE

    } //CONTROLLER 2 ENDS

视图加载得很好，但控制器是一样的。如果我从 body 标记中删除它，根本就没有控制器..

【问题讨论】：

takeAttendance.html 和 viewAttendance.html 是什么样的？通常，您可以在这些 HTML 文件中设置 Angular 控制器。
它们实际上包含了几个用 ng-repeat 生成的。从那里设置控制器确实可以正确呈现表格，但不会呈现 ng-view 占位符之外的所有其他变量...
什么意思？什么渲染不正确？
因为路由器将控制器绑定到 ng-view 元素。所以它基本上在表格元素上设置了 ng-controller。如果您希望整个主体由一个或另一个控制器控制，那么我建议将此 HTML 移动到模板或对应该在两个视图中的这些元素使用 ng-include。
@JohnBarton ng-view 之外的所有变量...