- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在进行移动应用开发方面的培训,目前正在使用 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>
关于javascript - Phonegap/AngularJS : can't get $apply() working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27197028/
我对这个错误很困惑: Cannot implicitly convert type 'System.Func [c:\Program Files (x86)\Reference Assemblies\
考虑这段代码: pub trait Hello { fn hello(&self); } impl Hello for Any { fn hello(&self) {
问题很简单。是否可以构造这样一个类型 T,对于它下面的两个变量声明会产生不同的结果? T t1 = {}; T t2{}; 我已经研究 cppreference 和标准一个多小时了,我了解以下内容:
Intellij idea 给我这个错误:“Compare (T, T) in Comparator cannot be applied to (T, T)” 对于以下代码: public class
任何人都可以告诉我 : n\t\t\t\t\n\t\t\t 在以下来自和 dwr 服务的响应中的含义和用途是什么. \r\n\t\t\t \r\n\t\t\t
让 T 成为一个 C++ 类。 下面三个指令在行为上有什么区别吗? T a; T a(); T a = T(); T 为不带参数的构造函数提供了显式定义这一事实是否对问题有任何改变? 后续问题:如果
Rust中的智能指针是什么 智能指针(smart pointers)是一类数据结构,是拥有数据所有权和额外功能的指针。是指针的进一步发展 指针(pointer)是一个包含内存地
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
我有一个来自 .xls 电子表格的数据框,我打印了 print(df.columns.values) 列,输出包含一个名为:Poll Responses\n\t\t\t\t\t。 我查看了 Excel
This question already has answers here: What are good reasons for choosing invariance in an API like
指针类型作为类型前缀与在类型前加斜杠作为后缀有什么区别。斜线到底是什么意思? 最佳答案 语法 T/~ 和 T/& 基本上已被弃用(我什至不确定编译器是否仍然接受它)。在向新向量方案过渡的初始阶段,[T
我正在尝试找到一种方法来获取模板参数的基类。 考虑以下类: template class Foo { public: Foo(){}; ~Foo(){};
这是一个让我感到困惑的小问题。我不知道如何描述它,所以只看下面的代码: struct B { B() {} B(B&) { std::cout ::value #include
为什么有 T::T(T&) 而 T::T(const T&) 更适合 copy ? (大概是用来实现move语义的???) 原始描述(被melpomene证明是错误的): 在C++11中,支持了一种新
在 Java 7 中使用 eclipse 4.2 并尝试实现 List 接口(interface)的以下方法时,我收到了警告。 public T[] toArray(T[] a) { ret
假设有三个函数: def foo[T](a:T, b:T): T = a def test1 = foo(1, "2") def test2 = foo(List(), ListBuffer()) 虽
我对柯里化(Currying)和非柯里化(Currying)泛型函数之间类型检查的差异有点困惑: scala> def x[T](a: T, b: T) = (a == b) x: [T](a: T,
考虑一个类A,我如何编写一个具有与相同行为的模板 A& pretty(A& x) { /* make x pretty */ return x; } A pretty(A&& x) {
Eclipse 表示由于泛型类型橡皮擦,类型参数不允许使用 instanceof 操作。 我同意在运行时不会保留任何类型信息。但是请考虑以下类的通用声明: class SomeClass{ T
在 C++14 中: 对于任何整数或枚举类型 T 以及对于任何表达式 expr: 有没有区别: struct S { T t { expr }; }; 和 struct S { T t = { exp
我是一名优秀的程序员,十分优秀!