AngularJS 有温泉 UI

Question

我很难潜入 AngularJS 温泉 UI。

我不明白下面的代码有什么问题。我想显示字符串 'First Page' 而不是 {{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

我以前没有使用过这个框架，但是就绪回调可能与 angular 摘要周期无关。如有疑问，请尝试添加范围 $apply 或 $timeout.

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

为避免用户看到一闪而过的 angular 代码，您还可以将 p 标记的标记替换为

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

AngularJS 有温泉 UI

AngularJS with Onsen UI

angularjs

onsen-ui