Currently, I am working on a project that involves creating a website with various links using AngularJS routing. One of these links should only be visible to administrators. User authentication and role information are stored in cookies. Here is the basic layout of the page:
<body ng-app="Main">
<ul>
<li><a href="#/!" class="active">Send SMS</a></li> //main-view
<li><a href="#!edit" ng-show="isAdmin">Edit Groups</a></li> //admin-view
<li><a href="#!logout">Log out</a></li>
</ul>
<div ng-view></div>
Here is the corresponding JavaScript/AngularJS code:
var app = angular.module('Main', ["ngRoute"]);
//Controller for the admin-View
app.controller('adminCtrl', ['$scope', function($scope)
{
$scope.isAdmin = checkAdmin();
console.log($scope.isAdmin);
//additional functions and AJAX calls go here
}]);
//Controller for the main-View
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.isAdmin = checkAdmin();
//additional functions and AJAX calls go here
}]);
When logging in and navigating to the main-view, everything seems to work fine. However, if I try to interact with the page by clicking a button (triggering a function), the Console logs "undefined" and an error occurs stating that "isAdmin" cannot be set because it is undefined.
Here is an example function called on button click:
$scope.sendSms = function(){
$.ajax({
url: 'sendSms.php',
type: 'POST',
data: {text: $scope.Text},
success: function (response)
{
$scope.Text = "";
$scope.showSuccessSend = true;
$scope.$apply();
},
error: function ()
{
$scope.showFailSend = true;
}
});
};
I have tried numerous solutions, including using $rootScope, but the issue persists where the scope becomes undefined. Any assistance in identifying the root cause of this problem would be greatly appreciated!