Question

我在AngularJS和离子框架上编写移动应用程序。我在这段代码中的问题：

var App = angular.module('app', ['ionic']);

App.controller('TimerCtrl', function($scope, $ionicPlatform) {
    $scope.timer = {};
    $scope.timer.day = 0;
    $scope.initApp = function() {
            // some init variables and functions
            $scope.timer.day = 145;
            // other vars and funcs...
    };
    $ionicPlatform.ready(function() {
        $scope.initApp();
    });
});

为什么应用启动后{{timer.day}}等于0？我有一些按钮可以在页面上执行某些操作。按下此按钮后{{timer.day}}更改为145。

index.html代码：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <title>app</title>

        <script type="text/javascript" src="lib/ionic/js/ionic.bundle.min.js"></script>
        <script type="text/javascript" src="js/ng-cordova.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body ng-controller="TimerCtrl">
        <div id="main" class="padding">
                    <div class="row">
                        <div class="col col-75">
                            <div>День {{timer.day}}</div>
                        </div>
                        <div id="buttons" class="col col-25">
                            <button class="button icon ion-play button-clear timer-button" ng-click="startTimer()" ng-show="!timerStart"></button>
                        </div>
                    </div>
        </div>
        <div class="bar bar-footer">
            <button class="button icon ion-refresh" ng-click="showHardResetPopup()"></button>
        </div>
    </body>
</html>

Answer 1

可能你不需要调用$ ionicPlatform.ready，因为通常用于包装适用于某些插件的代码。所以在我看来你应该尝试这样的事情：see this fiddle demo

var App = angular.module('app', ['ionic']);

App.controller('TimerCtrl', function($scope) {
    $scope.timer = {};
    $scope.timer.day = 0;
    $scope.incrementDay = function() {
        $scope.timer.day += 1;
    };
    $scope.incrementDay(); // when the controller is loaded increment +1 day
});

HTML：

{{timer.day}}
<button class="button button-stable" ng-click="incrementDay()">
  Increment timer day
</button>

Answer 2

我不知道$ionicPlatform，但$scope.$apply();可以解决您的问题，但似乎只有$scope.initApp();。

如果有帮助，请告诉我。

Answer 3

不要使用$ scope。$ apply（）。 $ ionicPlatform是一个角度模块，这里不需要“应用”。

如果在离线就绪上真正调用就绪函数，请使用console.log进行调试。

Answer 4

我认为最好发布html代码，或者至少告诉我们是否在单击按钮时调用了initApp（）函数，或者某个其他函数是否绑定到此按钮。如果它在TimerCtrl的范围内，应该调用initApp（），否则可能是$ ionicPlatform就像[here]一样准备好了吗？1

在按下按钮之前，不会正确显示角度变量

4 个答案: