代码之家 › 专栏 › 技术社区 › Simon Lang

强制angularjs指令链接到摘要循环之外

angularjs javascript

Simon Lang · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

Rodrigo Ferreira 7 年前

根据文件,你可以用 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);
  });
})

希望这就是你要找的!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前