I am new to Angular and originally had this working when everything was inside one file. Now I am trying to use partials and i am having problems. Here is my index page:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"; ng-app="JBenchApp"><head> <title>Judicial Workbench</title> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/styles.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js";></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js";></script> <script src="js/controllers.js"></script> <script src="js/app.js"></script> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/bootstrap-datepicker.js"></script> <link href="css/bootstrap-datepicker.css" rel="stylesheet" /> <script> $(document).ready(function () { var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '/' + dd + '/' + yyyy; $('#datepicker').datepicker({ autoclose: true, startDate: today }); $('#theDate').val(today); var $active = $('#accordion .panel-collapse.in').prev().addClass('active'); $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>'); $('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>'); $('#accordion').on('show.bs.collapse', function (e) { $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); }); $('#accordion').on('hide.bs.collapse', function (e) { $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus'); }); $('#firstWarrant').click(function () { $('#showLogo').hide(); $('#typeOfCase').html('Warrant - Moritz, Jay'); $('#warrant1').show(); $('#warrant2').hide(); }); $('#secondWarrant').click(function () { $('#showLogo').hide(); $('#typeOfCase').html('Warrant - Newman, Erika'); $('#warrant2').show(); $('#warrant1').hide(); }); $('.navbar-nav li').click(function (e) { $('.navbar-nav li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); }); }); </script> <base href="/" /></head><body ng-controller="JBenchCtrl"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid black-back"> <div class="navbar-header"> <a class="navbar-brand" href="#">Judicial Workbench</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Calendar</a></li> <li><a href="#">Min/Mandatory Chart</a></li> <li><a href="#">Trial Guide</a></li> <li><a href="#">Calendar Check-in</a></li> </ul> <div class="pull-right" ng-show="!loggedin"> <input type="text" name="userName" placeholder="Username" class="login-area" /> <input type="password" name="userPassword" placeholder="Password" class="login-area" /> <button class="btn btn-primary" type="submit" ng-click="isLoggedIn();"> Login </button> </div> <div class="pull-right white" ng-show="loggedin"> <span>Welcome, Judge Mahony!</span> <ul class="nav navbar-nav navbar-right white"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search search"></span></a> <ul class="dropdown-menu" role="menu"> <li> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default btn-block submitBtn">Submit</button> </form> </li> </ul> </li> </ul> <a href="#"><span class="glyphicon glyphicon-cog white settings"></span></a> </div> </div> </nav> <div class="container-fluid"> <div ng-view> <!-- Location for partial views to be displayed--> </div> </div></body></html> Here is my app.js: 'use strict'; var JBenchApp = angular.module('JBenchApp', [ 'ngRoute', 'JBenchControllers']); JBenchApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/dashboard', { templateUrl: 'partials/dashboard.html', controller: 'JBenchCtrl' }). when('/calendar', { templateUrl: 'partials/calendar.html', controller: 'JBenchCtrl' }). when('/', { templateUrl: 'partials/calendar.html', controller: 'JBenchCtrl' }). otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); Here is the controllers.js: 'use strict'; /** Controllers **/ var JBenchControllers = angular.module('JBenchControllers', []); JBenchControllers.controller('JBenchCtrl', function ($scope) { $scope.loggedin = false; $scope.isLoggedIn = function () { $scope.loggedin = true; };}); Here is my calendar.html partial: <div class="row" ng-show="loggedin"> <div class="col-sm-4"> Calendar here </div> <div class="col-sm-8"> Case list here </div> </div> When i click the button that has ng-click="isLoggedIn" the "calendar here" and "case list here" row doesn't show. However, the part of my index.html file that says "Welcome, Judge Mahony!" does show and it is also dependent upon the same variable. What am I doing wrong? The intriguing part is that developer tools shows the variable isloggedin as false yet the "Welcome..." shows despite being told ng-show="isloggedin" This worked when it was all one page. I was pointed to this in the Angular documentaiton: https://docs.angularjs.org/api/ngRoute/directive/ngView which alleges that there is a new scope, but I fail to see that in developer tools. Help??? -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
