Question

这是指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>

Answer 1

根据文档，您可以使用angular.injector

angular.injector允许您在应用程序启动后注入并编译一些标记

因此您的示例代码可能是：

document.getElementById('button').addEventListener('click', function() {
  var $directive = $('<message>default message</message>');
  $('#content').append($directive);

  angular.element(document.body).injector().invoke(function($compile) {
    var scope = angular.element($directive).scope();
    $compile($directive)(scope);
  });
})

希望这就是您想要的！

强制AngularJS指令在摘要周期外链接

1 个答案: