2

I have a trouble to dive into AngularJS on Onsen UI.

I don't make sense what is wrong the following code. I want to show the string 'First Page' instead of {{initialText}}.

Please give me some advice.

Index.html

<head>
...
...
    <script>
        var module = ons.bootstrap('myApp', ['onsen']);
        module.controller('AppController', function($scope) { });
        module.controller('PageController', function($scope) {
            ons.ready(function() {
                console.log('FirstPage');
                $scope.initialText = 'First Page'; 
            });
        });
    </script>
</head>

<body ng-controller="AppController">
    <ons-navigator var="myNavigator" page="page1.html">
    </ons-navigator> 
</body>

page1.html

<ons-page ng-controller="PageController">
    <ons-toolbar>
        <div class="center">Navigator</div>
    </ons-toolbar>
    <div style="text-align: center">
        <br>
        <p>{{initialText}}</p>
    </div>
</ons-page>
Kazzz Studio
  • 449
  • 1
  • 6
  • 19

1 Answers1

3

I haven't used this framework before, but that on ready callback may not be tied to the angular digest cycle. When in doubt try adding a scope $apply or $timeout.

        ons.ready(function() {
            console.log('FirstPage');
            $scope.initialText = 'First Page'; 
            $scope.$apply();
        });

To avoid the user seeing a flash of angular code you can also replace the mark-up for that p tag with

<p ng-bind="initialText"></p>

denixtry
  • 2,928
  • 1
  • 21
  • 19