javascript - 为什么 angular.js 在添加动态元素时不够智能，无法编译 DOM？

Question

我真的很喜欢 AngularJS 通过允许您在应用程序中声明指令来启用自定义标签/元素的方式，但是，当我动态附加自定义标签时，没有任何反应:

angular.module('myApp', []).directive('test', (($compile) ->
   restrict: 'E'
   link: (scope, element, attributes) ->
     $(element).html('<h1>this is a test!</h1>')
))

$('body').append('<test></test>')

如何动态构建自定义标签的实例？

Answer 1

为什么要在 angular 之外调用 jquery？例如，通常你会在一个 Angular Directive(指令)中做一些事情，并且可以访问 $compile。如果你绝对需要在外面访问，你可以创建一个注入(inject)器。 (PLUNKER)

angular.module('myApp', []).directive('test', function($compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attributes) {
      $(element).html('<h1>this is a test!</h1>')
    }
  }
});

///////////////////////////////////////////////////////////////////////////////
// called outside angular, you can create an injector that knows about
// certain modules
///////////////////////////////////////////////////////////////////////////////
$(function() {
  // myApp for test directive to work, ng for $compile
  var $injector = angular.injector(['ng', 'myApp']);
  $injector.invoke(function($rootScope, $compile) {
    $('body').prepend($compile('<test>Inside injector</test>')($rootScope));
  });
});