Добавление шаблона динамически в директиве

Question

Я пытаюсь добавить шаблон динамически в мою угловую директиву. Я использовал функцию ссылки для компиляции переменной в элемент html, как указано в этом answer.

Но я не могу заставить его работать.

Это мой 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); 

    } 
}; 
});