个人中心
gpt4 book ai didi

javascript - Phonegap/AngularJS : can't get $apply() working

转载 作者：行者123 更新时间：2023-12-02 16:44:44 24 4
gpt4 key购买 nike

我正在进行移动应用开发方面的培训，目前正在使用 Phonegap、Onsen UI 和 AngularJS 开发婴儿 sleep 追踪器应用。

在初始化时，用户必须定义​​他们的宝宝当前是醒着还是睡着才能启动跟踪器。我在主页上使用了模态窗口。一旦他们点击，我想在主页上显示一条文字，例如“您的宝宝睡着了”或“您的宝宝醒了”，具体取决于他们的选择。

问题是我无法在单击其中一个按钮后更新 View ...我知道这是一个异步请求，所以我必须使用 $apply() 来重新启动 Angular 摘要周期，但我无法使其工作...

这是我的代码:

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Colette</title> 

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
  <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">  
  <link rel="stylesheet" href="styles/app.css"/>

  <script src="lib/onsen/js/angular/angular.js"></script>    
  <script src="lib/onsen/js/onsenui.js"></script> 
  <script src="lib/jquery-2.1.1.min.js "></script> 

  <script src="cordova.js"></script>

  <script>
    document.addEventListener("deviceready", function() {
        // retrieve the DOM element that had the ng-app attribute
        var domElement = $('html');
        angular.bootstrap(domElement, ["app"]);
    }, false);
    var app = angular.module('app',['onsen']);
  </script>

  <script src="lib/moment.js"></script>
  <script src="lib/utils.js"></script>
  <script src="home.js"></script>
  <script src="daily_stats.js"></script>
  <script src="history.js"></script>
  <script src="settings.js"></script>
</head>

<body>    

  <ons-sliding-menu
    menu-page="menu.html" main-page="home.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
  </ons-sliding-menu>

</body>
</html>

Home.html(默认加载):

<ons-modal id="welcome" ng-controller="home">
    <ons-row>
      <ons-col align="center">
        <h2>Welcome !</h2>
        To initialize the app,<br />please tell us if your<br />baby is currently
      </ons-col>
    </ons-row>
    <ons-row style="margin-top: 20px;">
      <ons-col align="right" size="40%">
        <ons-button ng-click="init(false)">ASLEEP</ons-button>
      </ons-col>
      <ons-col align="center" size="20%">OR</ons-col>
      <ons-col align="left" size="40%">
        <ons-button ng-click="init(true)">AWAKE</ons-button>
      </ons-col>
    </ons-row>
    <ons-row style="margin-top: 20px;">
      <ons-col align="center">
        Thanks !
      </ons-col>
    </ons-row>
</ons-modal>

<ons-page modifier="home" class="home" ng-controller="home">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()">
        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center"><ons-icon icon="fa-home"></ons-icon> Home</div>
  </ons-toolbar>

  <ons-row style="margin-top: 100px;">
    <ons-col align="center">
      <h3 class="state">{{state}}<br />{{stateTime}}.</h3>
      <ons-button ng-click="toggleState()">{{button_value | uppercase}}</ons-button>
      <p class="tips">{{tips}}</p>
    </ons-col>
  </ons-row>
</ons-page>

Home.js(家庭 Controller ):

/*
 * Home Controller
 */

app.controller('home', function($scope,$timeout,$http){

    $scope.appHash = "";
    $scope.button_value = "";
    $scope.state = "";
    $scope.stateTime = "";
    $scope.tips = "";
    $scope.awake = true;
    $scope.begin = new Date();
    $scope.records = new Array();

    $scope.init = function(awake){      
        if(awake){
            $scope.button_value = "asleep";
            $scope.state = "Your baby is awake";
            $scope.tips = "Click 'ASLEEP' when your baby start to sleep.";
            $scope.awake = true;
        }
        else{
            $scope.button_value = "awake";
            $scope.state = "Your baby is asleep";
            $scope.tips = "Click 'AWAKE' when your baby is awake.";
            $scope.awake = false;
        }       
        //menu.setMainPage('home.html');
        $scope.saveState();
        $('#welcome').hide();
        $scope.$apply();
    }   

    $scope.restore = function(){
        $scope.appHash = localStorage.getItem('appHash');
        $scope.button_value = localStorage.getItem('button_value');
        $scope.state = localStorage.getItem('state');
        $scope.tips = localStorage.getItem('tips');
        $scope.awake = localStorage.getItem('awake');
        $scope.begin = new Date(localStorage.getItem('begin'));
        $scope.records = JSON.parse(localStorage.getItem('records'));
    }

    $scope.saveState = function(){
        localStorage.setItem('button_value', $scope.button_value);
        localStorage.setItem('state', $scope.state);
        localStorage.setItem('tips', $scope.tips);
        localStorage.setItem('awake', $scope.awake);
        localStorage.setItem('begin', $scope.begin);
        localStorage.setItem('records', JSON.stringify($scope.records));        
    }


    if(localStorage.getItem('appHash') == null){
        $http.get(backendURL+'?method=addApp&id=1').
            success(function(data, status, headers, config) {
                //response = JSON.parse(data);
                localStorage.setItem('appHash', data.result[0]);                
                $scope.appHash = data.result[0];
            }).
            error(function(data, status, headers, config) {
                    $scope.appHash = data.result[0];
            });
        $('#welcome').show();
    }
    else{
        $('#home').show();
        $scope.restore();
        $scope.refreshStateTime();
    }   

});

当点击其中一个初始按钮时，将使用 good 参数调用 init() 方法。但 View 没有更新..

我评论了menu.setMainPage('home.html');，这是重新加载页面的临时解决方案。

我似乎无法弄清楚我在这里做错了什么。

我对这三种技术(Phonegap、Onsen UI 和 Angular.js)也很陌生，这个应用程序目前只是一个培训。

感谢您的帮助!

最佳答案

每个 Controller 都是一个新实例，而不是单例。因此，您正在通过 init() 更新一个 Controller 的状态，但您尝试更新的 ui 已绑定(bind)到另一个 Controller 实例的变量，该实例具有自己单独的 $scope。

<ons-modal id="welcome" ng-controller="home">
    ...
</ons-modal>

<ons-page modifier="home" class="home" ng-controller="home">
...
</ons-page>

http://plnkr.co/edit/wU2itKfEJZ8JvdaVsRgZ?p=preview

一种解决方案是将您的 html 包装在另一个标记中，并将 Controller 分配给该标记。然后删除另外两个现有 Controller 。

<div ng-controller="home">
    <ons-modal id="welcome">
        ...
    </ons-modal>

    <ons-page modifier="home" class="home">
    ...
    </ons-page>
</div>

http://plnkr.co/edit/wU2itKfEJZ8JvdaVsRgZ?p=preview

关于javascript - Phonegap/AngularJS : can't get $apply() working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27197028/

24 4 0
文章推荐： asp.net - 在asp.net mvc中获取在线用户列表
文章推荐： spring - 如何从 Spring 检索 azure AD JWT 访问 token ？
文章推荐： couchdb - Ironclad 和 couch pbkdf2 哈希之间不匹配
文章推荐： 插入到 Azure SQL 表时触发 Azure 事件网格自定义主题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com