我在移动应用程序开发方面进行自我训练，目前我正在使用Phonegap，Onsen UI和AngularJS开发一个婴儿睡眠应用程序。
在初始化时，用户必须定义他们的宝宝目前是醒着还是睡着以启动跟踪器。我在主页上使用了模态窗口。一旦他们点击，我想在主页上显示一个文字，例如“你的宝宝睡着了”。或者＆＃39;你的宝宝醒着，取决于他们的选择。
事情是我无法在点击其中一个按钮后更新视图...我知道这是一个异步请求，所以我必须使用$ apply（）重新启动Angular摘要周期，但是我无法让它发挥作用......
这是我的代码：
的index.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（家庭控制器）：
/*
* 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();
}
});
当其中一个初始按钮被cicked时，使用good参数调用init()方法。但是视图没有更新..
我评论了menu.setMainPage('home.html');，这是重新加载页面的临时解决方案。
我似乎无法弄清楚我在这里做错了什么。
我对这三项技术（Phonegap，Onsen UI和Angular.js）也很陌生，此应用程序目前正在进行培训。
感谢您的帮助！
答案 0 :(得分：2)
每个控制器都是一个新实例，而不是一个单例。因此，您通过init（）更新一个控制器的状态，但是您尝试更新的ui被绑定到另一个控制器实例的变量，并且它具有独立的$ 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包装在另一个标签中并将控制器分配给它。然后删除另外两个现有的控制器。
<div ng-controller="home">
<ons-modal id="welcome">
...
</ons-modal>
<ons-page modifier="home" class="home">
...
</ons-page>
</div>