javascript - Switching views does not switch controller in angular -
i have simple angular app uses 2 templates , controllers. 2 buttons placed switch views.they call function, defined within controlles, uses window.location='' switch location.
however, if place ng-controller directive, template changes controller not. if remove ng-controller directive, no controller loads @ all,but default view rendered.
what going wrong?? here code:
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 switch 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' > <!-- content contains ng-models , ng-binds --> </table> <!-- table contains 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 angular app** *>define major functions ********** ********************************/ //initalize app var app=angular.module('schoolconnect',['ngsanitize','ngroute']); //define views function configviews($routeprovider) { $routeprovider //default view take attendance .when('/take',{ templateurl: 'partials/takeattendance.html', controller: "takectrl" }) //view 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 variables 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 variables 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 load fine controller same.if remove body tag, there no controller @ all..
if binding controller view in route provider, there no need use ng-controller.
<body ng-app='schoolconnect' > inject $location service switch views.
viewctrl($scope,$http,$location){ and use path method switch specified view:
$location.path('/take'); then insert in index.html ng-view
<div ng-view></div> in div there views route.
Comments
Post a Comment