2015-07-21 80 views
1

我有一个简单的角度应用程序,使用两个模板和控制器。 两个按钮用于切换视图。他们调用一个函数,在控制中定义,它使用window.location =''来切换位置。切换视图不会切换角度控制器

但是,如果我放置ng控制器指令,模板会改变,但控制器不会。 但是,如果我只是删除ng控制器指令,根本没有控制器加载,但呈现默认视图。

怎么回事? 这里是我的代码:

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 

的意见负载得很好,但该控制器是same.If我从body标签中取出,根本没有控制器..

+0

takeAttendance.html和viewAttendance.html的外观如何?通常,您可以在您的HTML文件中设置您的Angular控制器。 –

+0

它们的行为包含ng-repeat生成的几个。从那里设置控制器会正确呈现表格,但不会呈现ng-view占位符外的所有其他变量... –

+0

这是什么意思?什么渲染不正确? –

回答

0

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

<body ng-app='schoolConnect' > 

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

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

而使用路径方法切换到指定的视图:

$location.path('/take'); 

然后index.html中NG-视图中插入

<div ng-view></div> 

在该div会有从路线的意见。