在指令中动态添加模板

Adding template dynamically in directive

本文关键字：添加 动态 指令      更新时间：2023-09-26

我正在尝试在我的角度指令中动态添加一个模板。我使用链接函数将变量编译为html元素，如本答案所示。

但我无法让它工作。

这是我的 html：

<spinners></spinners>

这是我的指令：

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);
        }
    };
});

实际上，我正在使用Angular-SpinKit在我的加载页面中随机显示微调器。当我直接使用旋转套件的单个指令时，它可以工作。但是当我使用上述方法时，我在 html 页面中找不到任何内容。

看起来问题出在这一行compile(el.contents())(scope);

compile应该是$compile的，它是一个服务，应该注入到指令中。

所以：$compile(el.contents())(scope);和app.directive('spinners', function($compile) { 

app.directive('spinners', function($compile) {
    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);
        }
    };
});

试试这个： 

app.directive('spinners', function($compile) {
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);
        element.replaceWith(el);
        $compile(el)(scope);
    }
};
});
相关文章：