My code retrieves a list of permissions in the background and once those are retrieved, I want to either display the page or an error depending on if the user is permissioned.
What's bizarre is that I have two sections, page and error, one with ng-show matching the function which determines if the user is permissioned, and one with the negated function. But both page sections are showing.
If I change them both to be just the function itself - "isPermissioned" then the top one shows and the bottom doesn't, so it looks like they are getting different values from the same function. Could this be because one is executing before the other and when the background method updates the permissions, it isn't triggering the data binding? I suppose I am binding to a function, not a variable. How can I have the functions re-evaluate when something changes?
HTML is
<div ng-controller="SEFlexHomeController" ng-show="isPermissioned">
<div class="row" id="TabsSet1">
<div class="col-md-12">
<ul>
<li ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs"><a href="#tabs-Jobs">Jobs</a></li>
<li ng-show="AuthService.canViewFlexModels"><a href="#tabs-Models">Models</a></li>
<li ng-show="AuthService.canAdministerFlex"><a href="#tabs-Administration">Administration</a></li>
</ul>
<div id="tabs-Jobs" ng-show="AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs">
<h1>Welcome to this jobs tab</h1>
</div>
<div id="tabs-Models" ng-show="AuthService.canViewFlexModels">
<h1>Welcome to this models tab</h1>
</div>
<div id="tabs-Administration" ng-show="AuthService.canAdministerFlex">
<h1>Welcome to this administration tab</h1>
</div>
</div>
</div>
</div>
<div ng-show="!isPermissioned">
<h3>You have no permissions to view Secure Environment pages</h3>
</div>
JavaScript
app.controller("SEFlexHomeController", ["$scope", "$http", "$modal", "$log", "$element", "$rootScope", "AlertsService", "AuthService", "SEApplicationService", function ($scope, $http, $modal, $log, $element, $rootScope, AlertsService, AuthService, SEApplicationService) {
$rootScope.closeAlert = AlertsService.closeAlert;
$scope.isDataLoading = false;
$scope.AuthService = AuthService;
$scope.show = false;
$scope.isPermissioned = function() {
return AuthService.canAdministerFlex || AuthService.canViewFlexModels || AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs;
}
}
]);
Auth service
function AuthService($log, $http) {
var authService = {
canRunFlexJobs: false,
canRunHighPriorityFlexJobs: false,
canViewFlexModels: false,
canApproveFlexModels: false,
canAdministerFlex: false
};
authService.getUserClaims = function () {
$http.post("/Admin/Auth/GetUserClaims")
.success(function (response, status, headers, config) {
if (response) {
angular.forEach(response.data, function (item) {
if (item.Value === "SEFlexJobRunner")
authService.canRunFlexJobs = true;
if (item.Value === "SEFlexHighPriorityJobRunner")
authService.canRunHighPriorityFlexJobs = true;
if (item.Value === "SEFlexModelViewer")
authService.canViewFlexModels = true;
if (item.Value === "SEFlexModelApprover")
authService.canApproveFlexModels = true;
if (item.Value === "SEFlexAdministrator")
authService.canAdministerFlex = true;
});
}
})
.error(function (reason, status, headers, config) {
console.log(reason);
});
}
authService.getUserClaims();
return authService;
};
Aucun commentaire:
Enregistrer un commentaire