$ scope。$ Angular中的Watch在Ionic / Cordova中不起作用 [英] $scope.$watch in Angular doesn't work in Ionic/Cordova
问题描述
我正在使用 Ionic Framework 构建应用程序，我现在想要创建一些开关交换机（这些基本上是花式风格的复选框）。当一个人翻转开关时我想将它发送到服务器，所以我首先尝试捕捉开关更改事件。在基本的角度安装中，我尝试使用html中的简单复选框（< input type =复选框ng-model =theswitch> ）和 $ watch 在我的控制器中如下：
I'm building an app using the Ionic Framework for which I now want to create some on-off switches (which are basically fancy styled checkboxes). When a person flips the switch I want to send this to the server, so I'm first trying to catch the switch change event. In a basic angular install I tried it with a simple checkbox in the html (<input type="checkbox" ng-model="theswitch">) and a $watch in my controller like so:
$scope.$watch('theswitch', function(){
console.log('theswitch changed');
if ($scope.boel){
console.log('theswitch is TRUE');
} else {
console.log('theswitch IS FALSE');
}
});
这就像魅力一样。我现在在我的Ionic应用程序中实现了类似的功能。我的HTML是这样的：
This works like a charm. I now implemented a similar thing in my Ionic app. My HTML is like this:
<ion-item class="item-toggle">
Mail
<label class="toggle">
<input type="checkbox" ng-model="mail">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
我的控制器如下所示：
myControllers.controller('AccountCtrl', function ($scope) {
$scope.$watch('mail', function(){
console.log('THE MODEL CHANGED');
if ($scope.mail) {
console.log('The button was turned ON.');
} else {
console.log('The button was turned OFF.');
}
});
});
加载屏幕后，我得到两个日志：
Upon loading the screen I get two logs:
THE MODEL CHANGED
The button was turned OFF.
之后我可以将交换机翻转一百万次，但我不再收到日志消息，甚至没有一个错误。因为它在我的角度测试网站上完美运行，但不在我的应用程序中，我有点迷失在可能出错的地方。
After that I can flip the switch a million times, but I get no log messages anymore, not even an error. Since it works perfectly in my angular test website, but not in my app, I'm kinda lost in what could be wrong.
任何人都知道我能做什么要抓住这个切换事件吗？欢迎提出所有提示！
Would anybody have any idea what I can do to catch this switch event? All tips are welcome!
推荐答案
不工作的可能原因 $ scope。$ watch 可能是覆盖子范围的属性。如果在控制器范围上设置 $ watch ，但在 ng-model 的复选框内创建了一个子范围控制器，子范围可能会创建自己的邮件属性和控制器$范围。$ watch将无法检测该属性的更改。以下是演示此问题的jsfiddle：链接。
Possible reason for not working $scope.$watch might be property overriding in child scope. If you set $watch on controller scope, but checkbox with ng-model binding is created inside some child scope of the controller, child scope might create its own mail property and controller $scope.$watch will not be able to detect changes in that property. Here is jsfiddle that demonstrates this problem: link.
为避免此问题，您不应在 ng-model 绑定的范围上使用原始值。相反，您应该绑定到作用域上对象的属性，例如 ng-model =formData.mail其中 formData 是控制器范围内的某个对象。要查看对象属性更改，您还可以使用点语法： $ scope。$ watch（'formData.mail'，function（）{...}）
To avoid this problem you should not use primitive values on the scope for ng-model bindings. Instead you should bind to properties of objects on the scope, for example ng-model="formData.mail" where formData is some object in the controller's scope. To watch for object property changes you also use dot syntax: $scope.$watch('formData.mail', function(){...})
希望这有帮助。
这篇关于$ scope。$ Angular中的Watch在Ionic / Cordova中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
