为啥 angular.js 在添加动态元素时不够聪明，无法编译 DOM？

Posted 2023-02-23

【中文标题】为啥 angular.js 在添加动态元素时不够聪明，无法编译 DOM？

【英文标题】：Why is angular.js not smart enough to compile DOM when adding dynamic elements?为什么 angular.js 在添加动态元素时不够聪明，无法编译 DOM？

【发布时间】：2013-06-09 01:13:05

【问题描述】：

我真的很喜欢 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>')

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

【问题讨论】：

Angular 怎么知道你刚刚改变了 DOM？您需要在附加之前编译您的 html（使用 $compile 服务）。

@Stewie 但我无法访问指令之外的 $compile 函数，有没有办法手动编译？比如 $('body').append($compile(''))

【参考方案1】：

你为什么在 Angular 之外调用 jquery？例如，通常你会从一个角度指令内部做一些事情，并且可以访问 $compile。如果您绝对需要外部访问，您可以创建一个注入器。 (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));
  );
);