javascript - 创建 DOM 元素时使用 AngularJS 进行检测

Question

我有一个第 3 方 Javascript 库，它在运行时动态地将 DOM 元素添加到一个 div 中。我正在寻找一种方法，在创建此元素时在 AngularJS (Angular 1) 中进行检测，因此我无法执行某些特定操作。

<div ng-controller="myCtrl">
    <div class="thisElementWasAddedOnRuntime"></div>
</div> 

我知道有一些 JS 库可以检测特定元素的创建。但我不想只为这种情况包括整个图书馆。

Answer 1

您需要创建自定义指令以使其正常工作。请看看这个简单的 fiddle demo 。您可以访问指令中的元素 link功能。在那里你应该在你的元素上绑定(bind)你的第三方库。指令是 DOM 元素上的标记，它告诉 AngularJS 的 HTML 编译器 将指定的行为附加到该 DOM 元素。您还可以查看 directives documentation .

查看

<div ng-controller="MyCtrl">
  <div my-directive></div>
</div>

AngularJS 应用程序:

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

myApp.controller('MyCtrl', function($scope) {});

myApp.directive('myDirective', function() {
  return {
    restrit: 'A',
    link: function(scope, element, attrs) {
        // use element here to bind your lib
        console.log(element);
    }
  }
});