Question

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

我搜索过，到目前为止只遇到this question，解决方案是不再维护的github回购。我想知道是否可以使用Angular 1.4进行视图封装。如果我是错误的，具体来说，我的模板指令是否有自己的封装样式，如在Polymer和Angular 2中完成而不依赖于Grunt？

Answer 1

似乎是这样。我在测试中使用Angular 1.6，但是我能够在包含绑定的angular指令中使用shadow DOM。

以下是我的示例代码：

<!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以将其绑定回指令的$ scope。

请注意，这仅适用于本机支持shadow DOM的浏览器。任何Polyfill都不支持真正的CSS封装。为此，最好使用BEM CSS形式：http://getbem.com/introduction/

Angular 1.4查看封装和Shadow DOM - 有可能吗？

1 个答案: