在指令中動態添加模板

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

    } 
}; 
});