您好我一直致力于角度应用。我怀疑是在添加新DOM时angularjs是否检测到指令。
让我们假设这个场景我有一个名为提及的Angular指令,当Dom有一个名为提及
的类时会编译添加新的Dom时会提及<a class="mention">Hello</a>
类。 angular指令是否检测到此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>'
}
});
&#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;
答案 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',[])
来声明新模块而不是抓取它; transclude:true
的指令在模板中应该有<ng-transclude></ng-transclude>
注意强>
直接在Angular中操作DOM是一种不好的做法。只能在指令的link
或compile
函数中执行此操作,或者在您没有其他选择时(例如,无法修改的第三方代码应与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