I've been working on implementing a Role-Based-Access-Control system in my application. The allowed resources are loaded from the server after login, and I was able to verify this using raw JavaScript code.
angular.module('app').directive('accessControl',
[
'AuthService', function (authService) {
return {
restrict: 'A',
scope: "=",
link: function (scope, element, attrs) {
scope.canShow = function(resource) {
var allowedResources = authService.accountInfo.resources;
return allowedResources.indexOf(resource) !== -1;
}
}
}
}
]);
However, as my entire application is in TypeScript, I have been attempting to create the directive in pure TypeScript without success. Here is my TypeScript code:
export class AccessControl implements ng.IDirective {
public authService: App.AuthService;
public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
constructor(authService: App.AuthService) {
this.authService = authService;
console.log('authservice: ', authService);
AccessControl.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
scope["canShow"] = function (resource: string) {
// some logic
console.log('can show' + resource);
return true;
};
};
}
public static factory(): ng.IDirectiveFactory {
var directive = (authService: App.AuthService) => {
return new AccessControl(authService);
};
directive['$inject'] = ['AuthService'];
return directive;
}
restrict = "A";
scope: "=";
}
angular.module('app').directive('accessControl', AccessControl.factory());
Unfortunately, it seems that the link function is never being called. Any help or guidance on this issue would be greatly appreciated.