I am trying to use AngularJS to set variables on the App level and then call them throughout the files for a page.
I am trying to set hard coded numbers to pass to the functions in the scripts. I can get the page to generate, so I know that the actual javascript code is working, but I don't seem to have the right syntax to set/call the variables in the HTML file.
So what is the correct syntax for setting the values so that I can reference them? So what is the correct syntax for referencing the values to pass into the function?
Below are the reduced files for reference.
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script language="JavaScript" src="./App.js" runat="server">
vApp.value("vPage", "0");
vApp.value("vLevel", "0");
vApp.value("vDivision", "0");
vApp.value("vLayout", "./Layout.html");
</script>
<script language="JavaScript" src="./Universal.js" runat="server"></script>
<script language="JavaScript" src="./Layout.js" runat="server"></script>
<script language="JavaScript" src="./Custom.js" runat="server"></script>
</head>
<body id="idBody" ng-app="vApp">
<any ng-include src="'Layout.html'"></any>
</body>
</html>
Layout.html
<any ng-controller="CustomController" ng-bind-html="getContent($rootScope.vPage)"></any>
App.js
var vApp = angular.module("vApp", []);
Custom.js
vApp.controller("CustomController", ['$scope', '$sce', '$rootScope', function ($scope, $sce, $rootScope, vPage)
{
$scope.getContent = function(vPage)
{
$scope.vResult = "";
$scope.vDefault = "";
$scope.vDefault += "Zero";
$scope.vResult += "<p id='idCenterContent'>";
if(vPage == 0)
{
$scope.vResult += $scope.vDefault;
}
else if(vPage == 1)
{
$scope.vResult += "One";
}
else if(vPage == 2)
{
$scope.vResult += "Two";
}
else if(vPage == 3)
{
$scope.vResult += "Three";
}
else
{
$scope.vResult += $scope.vDefault;
}
$scope.vResult += "</p>";
return $sce.trustAsHtml($scope.vResult);
};
}]);
So, I finally managed to learn enough to simulate what I was attempting to do by storing the page, level, and division on the UniversalController and removing all the parameters.
The variables are set by the initial HTML page:
<script language="JavaScript" runat="server">
{{vPage = 0;""}}
{{vLevel = 0;""}}
{{vDivision = 0;""}}
</script>