Question

我很难在Onsen UI上深入研究AngularJS。

我不明白以下代码有什么问题。我想要显示字符串＆＃39; First Page＆＃39;而不是{{initialText}}。

请给我一些建议。

的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>

Answer 1

之前我没有使用过这个框架，但是在准备好的回调中可能没有与角度摘要周期联系起来。如有疑问，请尝试添加范围$ apply或$ timeout。

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

为避免用户看到闪烁的角度代码，您还可以使用

替换该p代码的标记

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

AngularJS与Onsen UI

1 个答案: