gpt4 book ai didi

angularjs - Angular 1.4 View 封装和 Shadow DOM - 有可能吗?

转载 作者:行者123 更新时间:2023-12-03 03:37:55 24 4
gpt4 key购买 nike

出于稳定性原因,我正在将我的应用程序从使用 Polymer 更改为 Angular 1.4。由于我熟悉 Polymer 和 Web 组件(以及 future 对 Angular 2 的使用),我选择使用 Component Pattern 来构建我的应用程序。 .

我已经搜索过,到目前为止只找到this question解决方案是不再维护的 github 存储库。我想知道 Angular 1.4 是否可以进行 View 封装。如果我说错了,具体来说,我的模板指令是否可以有自己的封装样式,就像 Polymer 中所做的那样和 Angular 2 而不依赖 Grunt?

最佳答案

好像确实是这样。我在测试中使用 Angular 1.6,但我能够让影子 DOM 在 Angular 指令(包括绑定(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>

诀窍是不要为指令设置默认模板。只是我们一个空字符串。然后,在link 函数中,您将创建影子根并将其innerHTML 设置为您的真实模板。然后,您需要在影子根上运行 $compile 将其绑定(bind)回指令的 $scope。

Be aware that this will only work on a browser that natively supports shadow DOM. Any Polyfill will not support real CSS encapsulation. For that it is better to use a form of BEM CSS: http://getbem.com/introduction/

关于angularjs - Angular 1.4 View 封装和 Shadow DOM - 有可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33073728/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com