javascript - Angularjs 检测新 Dom 上的指令

Question

嗨，我一直在开发 Angular 应用程序。我的疑问是 AngularJS 在添加新 DOM 时是否检测到指令。

让我们假设这个场景，我有一个名为 mention 的 Angular 指令，当 Dom 有一个名为 mention 的类时，它会编译

当添加一个新的 Dom 类 <a class="mention">Hello</a> 时提到。 Angular Directive(指令)是否检测到此 DOM。

如果不是如何在这个新 DOM 上绑定(bind)事件。考虑以下场景。

var app = angular.module('app')
app.controller('Home',function ($scope, $timeout){
  $timeout( function () {
    $(".main").append("<a class='mention'> </a>"));
    }, 5000);
app.directive('mention', function() {
  return {
    restrict: 'AEC',
    transclude: true,
    link: function (scope, element, attb) {

    },
    template: '<h1> AT mentions </h1>'
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app="app" class='main' ng-controller="Home">
  
  </div>

Answer 1

Angular 不知道添加了新的 DOM，并且不会调用这些 DOM 元素上的指令。为了让 Angular 熟悉新的 DOM，您应该将其编译为新模板。您的代码应如下所示:

JavaScript

angular.module('app', []).
  controller('ctrl', function($scope, $timeout, $compile) {
    $timeout(function() {
      $(".main").append(
        $compile("<a class='mention'>some text</a>")($scope)
      );
    }, 500);
  }).
  directive('mention', function() {
    return {
      restrict: 'AEC',
      transclude: true,
      link: function (scope, element, attb) {

      },
      template: '<h1> AT mentions <ng-transclude></ng-transclude></h1>'
    }
  });

笨蛋

http://plnkr.co/edit/Q4Th2XU52MbOp6vRrjAs?p=preview

您可以像往常一样将事件绑定(bind)到新的 DOM:

$(".main").append(
    $compile("<a class='mention'>some text</a>")($scope)
).on('click', function() {
    $window.alert('click')
});

http://plnkr.co/edit/F9esG9YTRF2B25IP1alg?p=preview

除此之外，您提供的代码中存在多个问题:

• var app = angular.module('app')应该是var app = angular.module('app',[])声明新模块而不是获取它；
• 您在使用 jQuery 添加新 DOM 的行中放置了额外的右括号
• 您应该在 Controller 代码之外定义新指令
• 指令 transclude:true应该有<ng-transclude></ng-transclude>在模板中

注意

直接在 Angular 中操作 DOM 是一种不好的做法。仅在指令 link 中执行此操作或compile函数或当您别无选择时(例如，无法修改的第三方代码应与 Angular 集成)。