ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

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タグ)の影響を受けずに、独立してスタイルを組むことができると推察される。