I am a novice in Angular and had everything working well when it was all in one file. Now, as I attempt to use partials, I am encountering issues. Below 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 () {
// Datepicker initialization and other scripts here
});
</script>
<base href="/" />
</head>
<body ng-controller="JBenchCtrl">
<!-- Navbar and main content structure -->
</body>
</html>
Below is my app.js describing the configuration:
'use strict';
var JBenchApp = angular.module('JBenchApp', [
'ngRoute',
'JBenchControllers'
]);
JBenchApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
// Routing configurations here
$locationProvider.html5Mode(true);
}]);
The controllers.js script is where the logic resides:
'use strict';
/** Angular Controllers **/
var JBenchControllers = angular.module('JBenchControllers', []);
JBenchControllers.controller('JBenchCtrl', function ($scope) {
// Controller functions and variables defined here
});
This snippet shows the calendar.html partial that is causing display issues:
<div class="row" ng-show="loggedin">
<div class="col-sm-4">
Calendar here
</div>
<div class="col-sm-8">
Case list here
</div>
</div>
Upon clicking the button with ng-click="isLoggedIn", certain elements are not displaying as expected. The issue might be related to scopes or variable dependencies. Any guidance would be appreciated!
UPDATE: An ng-inspector image showcasing multiple scopes has been attached for reference. How can this be resolved? https://i.sstatic.net/TC22e.png