在指令中动态添加模板

Question

我想在我的角度指令中动态添加模板。我已经使用链接函数将该变量编译为如此answer中给出的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在我的加载页面随机显示的微调。当我直接使用spinkit的单个指令时，它可以工作。但是当我使用上述方法时，我无法在我的html页面中找到任何内容。

Answer 1

貌似问题是在这条线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); 
     } 
    }; 
}); 

Answer 2

试试这个：

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

    } 
}; 
});