One of my pages, base.html, contains the following code:
<html lang="en" data-ng-app="MyApp" data-ng-controller="MyController">
<body style="background-color: [[ BackgroundPrimaryColor ]]">
.
.
.
{{ block content }}
{{ endblock }}
.
.
.
</body>
<script>
// Creating an AngularJS Module for our AngularJS Application
var app=angular.module("MyApp",[]);
// Changing syntax for AngularJS Expression
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
// Defining AngularJS Controller for our AngularJS Application
app.controller("MyController",function($scope){
// Defining AngularJS Application Property to specify Mode of the Website
$scope.DarkMode=false;
// Defining function to change Mode of the Website
$scope.changeDarkLightMode=function(){
// Changing other values
if ($scope.DarkMode){
$scope.BackgroundPrimaryColor="black";
}
else{
$scope.BackgroundPrimaryColor="white";
}
// Changing value of the property DarkMode
$scope.DarkMode=!$scope.DarkMode;
};
// Calling changeDarkLightMode() whenever page loads
$scope.changeDarkLightMode();
});
</script>
</html>
Another page in my project is called contact me.html and it includes the following code:
{{ block content }}
<body onload="onLoad()">
.
.
.
</body>
<script>
function onLoad(){
document.getElementsbyTagName("body")[0].setAttribute("style","background-repeat: no-repeat;background-attachment: scroll;background-image: url({% static 'Contact_Me_Image.png' %});background-size:cover;background-position: 0% 20%;");}
</script>
{{ endblock }}
Essentially, the contact me.html page is a part of the base.html.
In the contact me.html page, I am dynamically setting the styling of the body tag using JavaScript. However, when I change the value of the AngularJS Property BackgroundPrimaryColor, the style changes back to its initial state.
If anyone knows why this happens, please let me know.