

monacaでOnsen UI Tabberを使用しています。  
JsonでHTMLタグ入りの変数を$scopeし、ng-bind-htmlで表示しようとしていますが  
ngSanitizeを読み込むために

[code]

    var app=angular.module('app', ['ngSanitize']);//(1)
    
[/code]

をすると  
**Error: [ng:areq] Argument 'MainController' is not a function, got
undefined**  
と出てしまい何も表示されなくなります。  
(1)を書かなければこのエラーは出なくなりますが、HTMLタグがエスケープされてしまうので書かないわけには行きません。  
何がいけないのでしょうか？  
ちなみにmonacaテンプレのOnsen UI Tabberを使わず、最小限のテンプレートにangular.js、angular-
sanitize.jsを手作業で追加すれば上記のようなことは起こらず正常に動作します。

**index.html**

[code]

    <!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>
    
[/code]

page1.html

[code]

    <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>
    
[/code]

助言くだされば助かります。  
何卒よろしくお願い致します。


CC BY-SA 3.0
2015-04-19T14:16:02.587
9318
2022-05-28T03:05:35.833
9382
question
onsen-ui angularjs
monaca Onsen UIでangular.moduleをするとエラーが起こる


こんな感じの書き方もできるみたいです。

プロジェクトの`README.md`より

[code]

    <script>
        var app=angular.module('app', ['onsen', '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>
    
[/code]

[Onsen UI Guide](http://ja.onsen.io/guide/overview.html)の「AngularJSからOnsen
UIを使う」より

[code]

    <script>
        var app=ons.bootstrap('app', ['onsen', '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>
    
[/code]


CC BY-SA 3.0
2015-04-20T01:59:24.693
9325
2015-04-20T01:59:24.693
3516
9318
answer