Question

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

但是，如果我放置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标签中删除它，根本就没有控制器..

Answer 1

如果要将控制器绑定到路由提供程序中的视图，则无需使用ng-controller。

<body ng-app='schoolConnect' >

注入$ location服务以正确切换视图。

viewCtrl($scope,$http,$location){

并使用path方法切换到指定视图：

$location.path('/take');

然后插入index.html ng-view

<div ng-view></div>

在这个div中会有来自路线的视图。

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

1 个答案: