Angular: 我如何应用在布局之后引入的指令？

Question

突然间我意识到我没有解决以下问题的工作计划（尽管我在这里问这个问题之前已经尝试了很多事情）。比如说，我们有以下简单的 angular 应用程序 (jsfiddle #1):

<div ng-app="debug">
  <ping/>
  <ping/>
  <ping/>
</div>

和

 var app = angular.module('debug', []);

    app.directive('ping', function() {
      return {
        restrict: 'E',
        template: '<h1>PONG!!!</h1>'
      }
    })

这很有魅力。好的，现在让我们尝试在布局出现后声明指令，例如 (jsfiddle #2):

 var app = angular.module('debug', []);

// I've tried to use setTimeout initially but failed as well
var $timeout  = angular.injector(['ng']).get('$timeout');

$timeout(function() {

app.directive('ping', function() {
  return {
    restrict: 'E',
    template: '<h1>PONG!!!</h1>'
  }
})  

console.log('here');
}, 1000);

我什么也没看到。我的问题是 - 如何重新编译 angular 应用程序并应用以异步方式声明的指令。

Answer 1

您可以只 select 这些元素并使用其范围重新编译它们，而不是重新编译整个应用程序。

示例：

function compileThem(selector){
  var compile = angular.injector(['ng','debug']).get('$compile'),
     elmSet = document.querySelectorAll(selector);

 angular.forEach(elmSet, function(elm){
    var scope = angular.element(elm).scope();
    compile(elm)(scope);
  }); 

  elmSet = null;

}

并将其命名为：

compileThem('ping');

Pen

Angular: 我如何应用在布局之后引入的指令？

Angular: How can I apply directive that've been introduced later then layout?

angularjs

angular-directive