10 $digest() iterations reached when using isolate scope in directive - angularjs

Question

I want to create an AngularJs directive to authorize based on some claims.
Basically I want an attribute in any html element (button, div, a, etc.) where I specified what groups can view the item and depending on whether the current user has these groups, the element will have an ng-show set to true or false.
This is my directive in typescript. I am injecting a service that takes care of checking whether the current user has or not any of the claims:
//
// Directive to hide or show html element based on group claims for the current user
//
// Usage: <button authorize="mycontroller.authorizedGroupsArray" />
//
namespace app.blocks.directives {
"use strict";
class AuthorizeDirective implements ng.IDirective {
public restrict: string = "A";
public replace: boolean = true;
public scope: any = {
authorizedGroups: "=authorize"
};
constructor(private $compile: ng.ICompileService, private authService: services.IAuthService) {
console.log("authorize directive init");
}
public static factory(): ng.IDirectiveFactory {
const directive = ($compile: ng.ICompileService, authService: services.IAuthService) =>
new AuthorizeDirective($compile, authService);
directive.$inject = [
"$compile",
"app.services.AuthService"
];
return directive;
}
public link(
scope: ng.IScope,
instanceElement: ng.IAugmentedJQuery,
instanceAttributes: ng.IAttributes): void {
let el = angular.element(instanceElement);
let groups: Array<string> = (<any>scope).authorizedGroups || [];
let authorized: boolean = this.authService.isUserAuthorized(groups); // returns true if the user has any of the groups among its claims
el.attr("ng-show", String(authorized));
//remove the attribute, otherwise it creates an infinite loop.
el.removeAttr("authorize");
this.$compile(el)(scope);
}
}
angular
.module("app.blocks.directives")
.directive("authorize", AuthorizeDirective.factory());
}
And I am using this directive like this assuming that for example in myCtrl I have a property like:
public get groupsAuthorized(): Array<string> {
return [
"accounting"
"administrators"
];
}
So in my view:
<button type="button" class="btn btn-default" authorize="myCtrl.groupsAuthorized">TEST</button>
The problem with this code is that works but it throws an error
app.globalexceptionhandler.config.ts:28 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!(…)(anonymous function) # app.globalexceptionhandler.config.ts:28$apply # angular.js:17792done # angular.js:11831completeRequest # angular.js:12033requestLoaded # angular.js:11966
angular.js:68 Uncaught Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html
The directive code is executed only once, and I am removing the attribute authorize after execution to ensure the directive is not executed in a loop. So I am not too sure what's going on.
If I remove the isolated scope (comment out the following):
//public scope: any = {
// authorizedGroups: "=authorize"
//};
and I try to get the argument passed in the authorize attribute like this in my directive:
let groups: any = instanceAttributes.authorize;
then the value of this groups variable is not the array itself but the string literal "myCtrl.groupsAuthorized" which is not valid because I want an array of groups, not the name of the array.
Why the isolated scope is causing the digest error? How to resolve the issue and get the array of groups in my directive?
UPDATE WORKAROUND:
I have a workaround in which basically I pass to the directive a string instead an array.
I would have the controller return a string with the groups comma separated:
public get groupsAuthorized(): string {
let groups: Array<string> = [
"accounting",
"administrators"
];
return groups.join(",");
}
and then I would use the directive in a similar way only this time passing that "magic" string rendered first in the view.
<button type="button" class="btn btn-default" authorize="{{myCtrl.groupsAuthorized}}">TEST</button>
and finally in my directive I would convert that comma separated string into an array like this:
public link(
scope: ng.IScope,
instanceElement: ng.IAugmentedJQuery,
instanceAttributes: ng.IAttributes): void {
let groupsCommaSeparated: string = (<any>instanceAttributes).authorize;
let groups: Array<string> = groupsCommaSeparated.split(",");
let element = angular.element(instanceElement);
let authorized: boolean = this.authService.isUserAuthorized(groups);
element.attr("ng-show", String(authorized));
//remove the attribute, otherwise it creates an infinite loop.
element.removeAttr("authorize");
this.$compile(element)(scope);
}
but this is not an elegant solution and it could cause problems if the format of the comma separated groups is not correct or if it has spaces after each comma! and I still would like to have my directive argument passing directly an array.