Это относится к приложению Angular 1.
Если DOM изменен вне контекста моего углового приложения, я знаю, что могу использовать angular.element(document.body).scope().$apply(), чтобы принудительно выполнить повторную визуализацию всего приложения, включая недавно внедренный контент.
Однако мои директивы никогда не связываются.
Таким образом, в приведенном ниже примере разметка <message></message> должна отображать Hello World, но когда она вводится вручную, а затем применяется дайджест, метод link никогда не запускается.
https://jsbin.com/wecevogubu/edit?html,js,console,output
Javascript
var app = angular.module('app', [])
app.directive('message', function() {
return {
template: 'Hello, World!',
link: function() {
console.log('message link')
}
}
})
document.getElementById('button').addEventListener('click', function() {
document.getElementById('content').innerHTML = '<message>default content</message>'
var scope = window.angular.element(document.body).scope()
scope.$apply()
})
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>
<body ng-app="app">
inside app:
<message></message>
outside app:
<button id="button">Print another message</button>
<div id="content"></div>
</body>
</html>