monaca Onsen UIでangular.moduleをするとエラーが起こる
monacaでOnsen UI Tabberを使用しています。
JsonでHTMLタグ入りの変数を$scopeし、ng-bind-htmlで表示しようとしていますが
ngSanitizeを読み込むために
var app=angular.module('app', ['ngSanitize']);//(1)
をすると
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
と出てしまい何も表示されなくなります。
(1)を書かなければこのエラーは出なくなりますが、HTMLタグがエスケープされてしまうので書かないわけには行きません。
何がいけないのでしょうか?
ちなみにmonacaテンプレのOnsen UI Tabberを使わず、最小限のテンプレートにangular.js、angular-sanitize.jsを手作業で追加すれば上記のようなことは起こらず正常に動作します。
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/angular-sanitize.js"></script>
<script>
ons.bootstrap();
var app=angular.module('app', ['ngSanitize']);
app.controller('MainController',function($scope){
datas= [
{"id":"1", "str":"<b>おはようございます</b>"},
{"id":"2","str":"<strong>こんにちは</strong>"},
{"id":"3","str":"<b>さようなら</b>"},
{"id":"4","str":"<strong>おやすみなさい</strong>"}];
$scope.msg =datas;
});
</script>
</head>
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="navigator.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
</html>
page1.html
<ons-page>
<ons-toolbar>
<div class="center">一番基本的なAngularJSアプリ</div>
</ons-toolbar>
<div ng-controller="MainController">
<ons-list>
<ons-list-item ng-repeat="data in msg">
{{data.id}}:<span ng-bind-html="data.str"></span>
</ons-list-item>
</ons-list>
</div>
</ons-page>
助言くだされば助かります。
何卒よろしくお願い致します。