Skip to first unread message
Michael J. Mahony
Aug 3, 2015, 2:43:24 PM8/3/15
to AngularJS
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???
Anton Trapp
Aug 4, 2015, 1:29:08 AM8/4/15
to AngularJS
Hi Michael!
Don't use jQuery and .click(), use a controller, put the function for the click there and put a "ng-click=doSomething()" to the element which should be clickable. If you want to create a custom datepicker (or whatever) write a component).
If you insist on using the $(document).ready and the click events, the $(document).ready will be executed after everything (on the start page) is loaded. The partial can come in later... so you would have to check every x ms if the element is already there, add a click one time and so on. Can get really nasty ;)
Don't use jQuery and .click(), use a controller, put the function for the click there and put a "ng-click=doSomething()" to the element which should be clickable. If you want to create a custom datepicker (or whatever) write a component).
If you insist on using the $(document).ready and the click events, the $(document).ready will be executed after everything (on the start page) is loaded. The partial can come in later... so you would have to check every x ms if the element is already there, add a click one time and so on. Can get really nasty ;)
...
Reply all
Reply to author
Forward
0 new messages