Angularjs检测新Dom的指令

时间:2015-05-22 10:49:51

标签: javascript jquery angularjs dom angularjs-directive

您好我一直致力于角度应用。我怀疑是在添加新DOM时angularjs是否检测到指令。

让我们假设这个场景我有一个名为提及的Angular指令,当Dom有一个名为提及

的类时会编译

添加新的Dom时会提及<a class="mention">Hello</a>类。 angular指令是否检测到此DOM。

如果不是如何在这个新DOM上绑定事件。请考虑以下情况。

&#13;
&#13;
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>'
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

Angular不知道添加了新DOM,也没有在这些DOM元素上调用指令。为了使角度熟悉新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>'
    }
  });

<强> Plunker

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

您可以像往常一样将事件绑定到新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的行中添加了额外的右括号
  • 您应该在控制器代码
  • 之外定义新指令
  • transclude:true的指令在模板中应该有<ng-transclude></ng-transclude>

注意

直接在Angular中操作DOM是一种不好的做法。只能在指令的linkcompile函数中执行此操作,或者在您没有其他选择时(例如,无法修改的第三方代码应与Angular集成)。

答案 1 :(得分:-2)

要回答这个问题:。在每个DOM elements周期,$digest上的角度循环,所以如果创建一个附加了指令的新节点,angular确实会看到该指令并进行初始化。 / p>

修改您的代码这似乎与$有关,而angular scope超出了append。您是否尝试将$apply包裹在$scope.$apply(function () { $(".main").append("<a class='mention'> </a>"); } 之内

Theme.AppCompat.Light.DarkActionBar