monacaのangularでのngIncludeについて
monacaのangularでngIncludeという外部ファイルをインクルードをしてくれるAPIが存在する。
例えば、hoge.htmlというインクルードされるファイルが下のようになっていたとする。
<p>hello angular</p>
それに対して呼び出し元を下のように実装する。
<!DOCTYPE html> <html ng-app="mainApp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsenui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsen-css-components.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/onsenui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/angular-onsenui.min.js"></script> <body> <div ng-include="'./hoge.html'"></div> <script> var module = angular.module('mainApp',['onsen']); </script> </body> </html>
実行すると、ブラウザには、1行で「hello angular」と表示されるだけなのだが、google chromeのコンソールログを見ると、divタグの直下に配置されているので、仮に、cssでdivタグにスタイルを当てていた場合、もろにその影響を受ける可能性がある。
<!DOCTYPE html> <html ng-app="mainApp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsenui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsen-css-components.min.css"/> <style> div { color:blue; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/onsenui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/angular-onsenui.min.js"></script> <body> <div ng-include="'./hoge.html'"></div> <script> var module = angular.module('mainApp',['onsen']); </script> </body> </html>
上の例は極端だが、試してみるとやはり、インクルードされた要素の文字(pタグの中にあるテキスト)が青色になった。
そこで、下のようにng-includeタグでincludeすればstyleの影響を受けないのではないだろうか?
<!DOCTYPE html> <html ng-app="mainApp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsenui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/css/onsen-css-components.min.css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/onsenui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.7.0/js/angular-onsenui.min.js"></script> <body> <ng-include src="'./hoge.html'"></ng-include> <script> var module = angular.module('mainApp',['onsen']); </script> </body> </html>
こうすれば親の要素(ここではng-includeタグ)の影響を受けずに、独立してスタイルを組むことができると推察される。