AngularJSとShadow DOM

私はWebコンポーネントフォームを開発しています。私はangularjs bootsrapに問題があります。AngularJSとShadow DOM

私はform.createdCallback <form> and <input, textarea etc>でカスタム要素を作成し、ng-app="", ng-controller=""属性を追加しています。後、私は、私はかなりよくラインtemplate.createShadowRoot()と角度実行すべてを削除しようとした、だから... ... template.createShadowRoot（）

私はdocument.addEventListener('DOMContentLoaded', function(){angular.bootstrap(document, ['mform'])})を使用しますが、これは私の角度アプリから何かを実行しないでやって

それをencapsule ...その結果、問題は内側のシャドードームをコンパイルしていないという結論に達しました。

これを行うためのハックや方法はありますか？

出典

2016-05-27 ClaudioZ

これはあなたの質問に本当に答えるかどうか分かりませんが、シャドーDOMをAngular 1.xで動作させることができます。 CSSカプセル化の後であれば、これはPolyfillが同じことをすることができないため、Shadow DOMをネイティブにサポートしているブラウザでのみ機能します。

私は$compileを使って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>

出典

2017-11-15 18:30:35 Intervalia

答えて

関連する問題