I am working on a basic Angular app that utilizes two templates and controllers. The app features two buttons for switching views, each calling a function within the controllers to switch locations using window.location=''.
However, I've encountered an issue where placing the ng-controller directive results in the template changing without the controller loading. Conversely, removing the ng-controller directive prevents any controller from loading, although the default view is rendered.
I'm wondering what could be causing this problem. Below is the code snippet:
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()' >
Take
</button>
<button class='btn btn-lg' ng-class='view_btn' ng-disabled='isViewing' ng-click='viewAttend()' >
View
</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
The views are loading correctly, but there seems to be an issue with the controller. Removing it from the body tag leaves no controller active at all.