I am currently developing a dashboard using AngularJS and have implemented a "widget" directive. The issue I am facing is that the widget can belong to one of several types, which is determined by a specific property within the directive. When it comes to templates, retrieving the attribute from the attributes object in the link function and compiling it is straightforward.
However, when it comes to the controller, I find it more challenging (or perhaps I am overlooking something). The current approach I have taken is as follows:
return ['$compile', '$http', function($compile, $http) {
var templateContent = '';
return {
restrict: 'A',
scope: {},
link: function($scope, element, attributes, controller) {
element.append($compile(templateContent)($scope));
...
}
};
}];
I am searching for a way to dynamically set the controller based on an attribute within the element. Is this achievable? I prefer not to explicitly define data-ng-controller on the element as I aim to only specify the TYPE of widget in the HTML without concerning myself with the template location or controller.
My ideal scenario would resemble something like this:
<div data-widget="typename">...</div>