My current challenge involves changing the fill color of attributes in an in-line SVG using Angular and TypeScript. The goal is to have the SVG elements with a "TA" attribute change their fill color based on a user-selected color from a dropdown menu. However, I am struggling to dynamically bind this attribute.
This is my approach:
export class TaDirective implements ng.IDirective {
static create_instance() : ng.IDirective {
return new TaDirective();
}
constructor(){
}
public bindToController = true;
public controllerAs = "ctrl";
public scope = { name: '=' };
public compile(element: ng.IAugmentedJQuery, attrs: ng.IAttributes, transclude: ng.ITranscludeFunction) {
var ta = attrs.$attr["ta"] as string
var ele = element[0];
attrs.$set('visibility', "visible")
// Attempting to bind to the controller's fill
attrs.$set('fill', "{{ ctrl.fill }}")
}
public link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, controller: any, transclude: ng.ITranscludeFunction) {
}
public controller(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes){
}
}
app.directive('ta', TaDirective.create_instance);
Check out the Plunker with the TypeScript and compiled JavaScript.
EDIT After some trial and error, I managed to make it work but it feels a bit clumsy as the scope name is hardcoded. Any suggestions on how to better separate the two would be appreciated. (Plunker also updated)
export class TaDirective implements ng.IDirective {
static create_instance() : ng.IDirective {
return new TaDirective();
}
constructor(){
}
public link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, controller: any, transclude: ng.ITranscludeFunction) {
var ta = attrs.$attr["ta"] as string
var ele = element[0];
attrs.$set('visibility', "visible")
scope.$watch('vm.fill', function(newFill) {
attrs.$set('fill', newFill)
})
}
}