I've been attempting to dynamically add a template within my Angular directive. Following the guidance in this answer, I utilized the link function to compile the variable into an HTML element.
However, despite my efforts, I haven't been successful in getting it to work.
This is the snippet of my HTML:
<spinners></spinners>
And here's my directive code:
app.directive('spinners', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var spinkit = ["<rotating-plane-spinner></rotating-plane-spinner>", "<double-bounce-spinner></double-bounce-spinner>", "<wave-spinner></wave-spinner>", "<wandering-cubes-spinner></wandering-cubes-spinner>", "<pulse-spinner></pulse-spinner>", "<chasing-dots-spinner></chasing-dots-spinner>", "<circle-spinner></circle-spinner>", "<three-bounce-spinner></three-bounce-spinner>", "<cube-grid-spinner></cube-grid-spinner>", "<word-press-spinner></word-press-spinner>", "<fading-circle-spinner></fading-circle-spinner>"];
var spinner = spinkit[Math.floor(Math.random() * spinkit.length)];
var el = angular.element(spinner);
compile(el.contents())(scope);
element.replaceWith(el);
}
};
});
In order to display spinners randomly on my loading page using Angular-SpinKit from here, I decided to implement this method. While using a single directive of spin kit directly works fine, implementing the above approach does not show anything on my HTML page.