AngularJs:无法切换两个元素的可见性
AngularJs: unable to toggle the visibility of two elements
我使用这种方法:
app.js
(function(){
var app = angular.module('myApp', ['fsCordova']);
app.controller('MyController', function($scope, CordovaService) {
this.ready = false;
CordovaService.ready.then(function() {
console.log ("CordovaService.ready received");
this.ready = true;
});
});
})();
我可以在控制台中看到消息CordovaService。准备好接受。
在我的index.html我有这个(只有有用的部分)。
<body ng-controller="MyController">
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening" ng-hide="ready">Connecting to Device</p>
<p class="event received" ng-show="ready">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
为了完整起见,这是。css文件
的相关部分。.event.listening {
background-color:#333333;
}
.event.received {
background-color:#4B946A;
}
.blink {
animation:fade 3000ms infinite;
}
我重复一下:我可以在控制台上看到消息CordovaService。准备好接受。所以js代码是工作的
问题是: 'Connecting to Device"仍然可见,即使MyController。Ready设置为true
如何调试?
应该使用$scope
在控制器和模板之间共享状态。
app.controller('MyController', ['$scope', 'CordovaService', function($scope, CordovaService) {
$scope.ready = false;
CordovaService.ready.then(function() {
console.log ("CordovaService.ready received");
$scope.ready = true;
});
}]);
你需要让控制器看起来像这样:
(function(){
var app = angular.module('myApp', ['fsCordova']);
app.controller('MyController', ['$scope','CordovaService',function($scope, CordovaService) {
$scope.ready = false;
CordovaService.ready.then(function() {
console.log ("CordovaService.ready received");
$scope.ready = true;
});
}]);
})();
这个的实际原因。ready在CordovaService.ready.then(function(){})函数中不工作,'this'将采用当前函数的作用域,即CordovaService.ready.then(function()而不是作用域,这就是为什么你的作用域没有更新
尝试使用$scope.ready
代替this.ready
编辑:我的回答很短,这里是一个扩展版本:
如文档所述:
作用域是应用程序控制器和视图之间的粘合剂
如果你想公开一个变量并在视图中获取更新后的值,你需要使用$作用域。如果您使用this
,则仅指控制器内的局部作用域,并且视图无法知道此变量。
相关文章:
- 如何在jQuery中包装两个元素的组
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- 检查来自不同数组的两个元素的一个属性是否相等
- javascript函数包含两个元素和web音频api
- 如何将日期和时间拆分为两个元素
- 检查最后两个元素
- 在两个元素的 onrender 事件之后执行函数
- 在照片库中的两个元素之间切换样式会发生变化
- 区分html代码中的两个元素
- 如何使用jQuery在两个元素之间切换类
- 如何使菜单容器在悬停两个元素以外的所有元素时隐藏
- 单击页面上的任意位置时隐藏两个元素
- Jquery两个元素,切换焦点/点击..有效但滞后
- 需要在ajax上传递两个元素的值
- 链接jQuery中的两个元素
- 根据两个元素的重叠宽度动态设置左填充
- JavaScript - 定位两个元素之间的字符串
- 在两个元素上切换引导“折叠”类
- 在 javascript 中替换 URL 中的两个元素
- 检测页面上两个元素是否具有相同的 ID