Error when doing angular.module in monaca Onsen UI

I am using Onsen UI Tabber in monaca.
I'm trying to $scope variables with HTML tags in Json and display them in ng-bind-html, but
To load ngSanitizes

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

when
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
It appears, and nothing is displayed.
(1)If you don't write , you won't get this error, but the HTML tag will be escaped, so you have to write it.
What's wrong?
By the way, if you manually add angular.js and angular-sanitizes.js to the minimum template without using the Onsen UI Tabber of the monaca template, the above will not happen and will work properly.

index.html

<!DOCTYPE HTML>
    <html>
    <head>
        <metacharset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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>Good morning</b>"},
                     {"id":"2", "str":"<strong>Hello </strong>"},
                     {"id":"3", "str":"<b>Goodbye</b>"},
                     {"id":"4", "str":"<strong>Good night</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">Most basic AngularJS app</div>
  </ons-toolbar>

  <div ng-controller="MainController">
    <ons-list>
        <ons-list-itemng-repeat="data in msg">
            {{data.id}}:<spanng-bind-html="data.str">/span>
        </ons-list-item>
    </ons-list>
  </div>
</ons-page>

I'd appreciate it if you could give me some advice.
Thank you for your cooperation.

onsen-ui angularjs

2022-09-30 20:46

1 Answers

I think I can write it like this.

From README.md in the project

<script>
    var app = angular.module('app', ['onsen', 'ngSanitizes']);
    app.controller('MainController', function($scope){
          datas=[
             {"id":"1", "str":"<b>Good morning</b>"},
             {"id":"2", "str":"<strong>Hello </strong>"},
             {"id":"3", "str":"<b>Goodbye</b>"},
             {"id":"4", "str":"<strong>Good night</strong>"};
        $scope.msg=datas;
    });
</script>

From "Using Onsen UI from AngularJS" in the Onsen UI Guide

<script>
    var app=ons.bootstrap('app', ['onsen', 'ngSanitizes']);
    app.controller('MainController', function($scope){
          datas=[
             {"id":"1", "str":"<b>Good morning</b>"},
             {"id":"2", "str":"<strong>Hello </strong>"},
             {"id":"3", "str":"<b>Goodbye</b>"},
             {"id":"4", "str":"<strong>Good night</strong>"};
        $scope.msg=datas;
    });
</script>

2022-09-30 20:46

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656