我正在开发一个Web组件表单。 我在使用angularjs bootsrap时遇到了麻烦。
我使用form.createdCallback <form> and <input, textarea etc>并添加ng-app="", ng-controller=""属性来创建自定义元素。
后来我用template.createShadowRoot（）
我使用document.addEventListener('DOMContentLoaded', function(){angular.bootstrap(document, ['mform'])})，但这样做不会从我的角应用程序中执行任何操作......
所以，我尝试删除行template.createShadowRoot()并且角度执行得非常好......所以我得出的结论是问题是角度没有在阴影dom中编译。
有没有任何黑客或方法可以做到这一点？
答案 0 :(得分：1)
我不确定这是否真的能回答你的问题，但我能够让Shadow DOM在Angular 1.x中运行。请注意，如果您正在使用CSS封装，那么这只适用于本机支持Shadow DOM的浏览器，因为Polyfill不能做同样的事情。
我使用<!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>
创建Shadow DOM的内容并将其绑定回指令。
这是我的代码示例：
{{1}}