Angularjs檢測新Dom的指令

Question

您好我一直在角度的應用程序。我懷疑是否angularjs檢測指令時，添加一個新的DOM。

讓我們假設這種情況下，我有角指令命名提其編譯時大教堂有一類名爲提

時添加類<a class="mention">Hello</a>提到一個新的DOM。角度指令是否檢測到這個DOM。

如果不是如何綁定這個新DOM上的事件。考慮以下情況。

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

角不知道新的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是一種不好的做法。僅在指令的link或compile函數中或當您沒有其他選擇時（例如，無法修改的第三方代碼應該與Angular集成）進行操作。

Answer 2

要回答這個問題：是。在每個$digest週期的角度循環遍歷你的DOM elements，所以如果一個新的節點將被創建並且附加了一個指令，那麼該指令的確會被angular看到並初始化。

修改你的代碼，這似乎與$有關，它不在angular scope之外。您是否嘗試過包裝的append在$apply像這樣

$scope.$apply(function() { 
    $(".main").append("<a class='mention'> </a>"); 
}