Upon logging in with the correct credentials, the server responds with a string containing new elements that include scripts. This element set replaces the content of the login page body. However, after loading the new content, the Angular functions fail to work properly.
Below is the login page:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="loginApp">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="js/login/loginMain.js">
</script>
Login<br><br>
<form ng-controller="loginController" ng-submit="postForm()">
User Name:<br>
<input ng-model="unameInputField" type="text" name="user[name]"><br>
Password:<br>
<input ng-model="passwordInputField" type="password" name="user[password]">
<input type="submit" name="Submit">
</form>
</body>
</html>
And here's the code from loginMain.js:
/* public/js/controllers/apps *************************************/
angular.module("loginApp", []);
angular.module("loginApp").controller("loginController", function($scope, $http){
$scope.unameInputField = "";
$scope.passwordInputField = "";
$scope.postForm = function() {
$http.post("/credentials.json", {username: $scope.unameInputField, password: $scope.passwordInputField},
{headers: {'Content-Type': 'application/json'}}).then(
function(res) { //Success
// window.location.href = 'http://localhost:3000/home';
console.log(res.data)
$("body").attr("ng-app", "myApp");
$("body").html(res.data);
},
function(res) { // Failed
alert("POST FAILED, Server is most probably offline")
}
)
}
})
Here are the HTML elements intended to be placed inside the body tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Home Electricity Manager </title>
<h1 id="the-header">Welcome to home electricity manager <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a786b6e6579666b7c246124676b786364657c4a6d676b636624696567">[email protected]</a>!</h1>
<div id="button-1-div" ng-controller="myController" order="1" style="text-align: center; display: inline-block;" ng-init="spanText=S4555">
<span id="button-1-span-1" ng-click="changeText()" style="white-space:pre;">{{spanText}}</span><br>
<button id="butt-1" ng-style="myStyle" ng-click="toggleRelay()">{{ButtonStatus}}</button>
</div><br>
<div id="button-2-div" ng-controller="myController" style="text-align: center; display: inline-block;">
<span id="button-2-span-2" ng-click="changeText()" style="white-space:pre;">{{spanText}}</span><br>
<button id="butt-2" ng-style="myStyle" ng-click="toggleRelay()">{{ButtonStatus}}</button>
</div><br>
<div change-cred></div>
In Chrome Developer View, it appears that the content has been replaced correctly, but the user view shows that Angular fails to compile the new content. Here's an image of how the page looks:
https://i.sstatic.net/FSQbi.png
If the Angular functions were functioning as expected, the user page would appear like this:
https://i.sstatic.net/lvDpM.png
I apologize for any shortcomings in my English expression. I hope you understand the issue at hand!