我正在开发一个网络组件表单。 我在使用 angularjs bootsrap 时遇到了麻烦。
我正在使用 form.createdCallback <form> and <input, textarea etc> 动态创建自定义元素并添加 ng-app="", ng-controller=""属性。
后来我用 template.createShadowRoot() 封装它
我使用document.addEventListener('DOMContentLoaded', function(){angular.bootstrap(document, ['mform'])}) ，但这样做不会执行我的 Angular 应用程序中的任何内容...
所以，我尝试删除行 template.createShadowRoot()并且 Angular 执行一切都很好...所以我得出的结论是问题是 Angular 没有在 Shadow dom 内编译。
有什么技巧或方法可以做到这一点吗？
最佳答案
我不确定这是否真的回答了你的问题，但我能够让 Shadow DOM 在 Angular 1.x 中工作。请注意，如果您进行 CSS 封装，那么这只适用于原生支持 Shadow DOM 的浏览器，因为 Polyfill 无法执行相同的操作。
我使用 $compile 创建 Shadow DOM 的内容并将其绑定(bind)回指令中。
这是我的代码示例:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Angular 1.x ShadowDOM example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myElController', ($scope) => {
});
var template = `
<style>
:host {
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid black;
box-shadow: 4px 4px 4px rgba(0,0,0,.4);
display: inline-block;
padding: 6px 12px;
}
h3 {
border-bottom: 1px solid #999;
margin: 0 -12px 8px;
padding: 0 12px 8px;
}
p {
margin: 0;
}
</style>
<h3>{{title}}</h3>
<p>{{info}}</p>
`;
app.directive('myEl', ($compile) => {
return {
"restrict": "E",
"controller": "myElController",
"template": '',
"scope": {
"title": "@",
"info": "@"
},
"link": function($scope, $element) {
console.log('here');
$scope.shadowRoot = $element[0].attachShadow({mode:'open'});
$scope.shadowRoot.innerHTML = template;
$compile($scope.shadowRoot)($scope);
}
};
});
</script>
</head>
<body>
<div>
<my-el title="This is a title" info="This is the info of the element"></my-el>
</div>
<div class="shell">
<h3>Outside title (H3)</h3>
<p>Outside content (P)</p>
</div>
</body>
</html>
关于AngularJS 和 Shadow DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37491962/