$scope$Angular中的手表;我不在爱奥尼亚/科尔多瓦工作

$scope.$watch in Angular doesn't work in Ionic/Cordova

本文关键字：工作 Angular scope 手表      更新时间：2023-09-26

我正在使用Ionic Framework构建一个应用程序，现在我想为它创建一些开关（基本上是花哨的复选框）。当有人拨动开关时，我想将其发送到服务器，所以我首先尝试捕捉开关更改事件。在一个基本的角度安装中，我在html中使用了一个简单的复选框（<input type="checkbox" ng-model="theswitch">），在我的控制器中使用了$watch，如下所示：

$scope.$watch('theswitch', function(){
    console.log('theswitch changed');
    if ($scope.boel){
        console.log('theswitch is TRUE');
    } else {
        console.log('theswitch IS FALSE');
    }
});

这很有魅力。我现在在我的Ionic应用程序中实现了类似的功能。我的HTML是这样的：

<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.');
        }
    });
});

加载屏幕后，我得到两个日志：

THE MODEL CHANGED
The button was turned OFF.

在那之后，我可以翻转开关一百万次，但我再也没有收到日志消息，甚至没有一个错误。由于它在我的角度测试网站上运行得很好，但在我的应用程序中却没有，我有点不知所措。

有人知道我能做些什么来捕捉这次切换事件吗？欢迎所有提示！

不工作$scope.$watch的可能原因可能是子作用域中的属性重写。如果在控制器作用域上设置了$watch，但在控制器的某个子作用域内创建了具有ng-model绑定的复选框，则子作用域可能会创建自己的mail属性和控制器$scope$watch将无法检测到该属性的更改。以下是演示这个问题的jsfiddle：链接。

若要避免此问题，不应在ng-model绑定的作用域上使用基元值。相反，您应该绑定到作用域上对象的属性，例如ng-model="formData.mail"，其中formData是控制器作用域中的某个对象。要观察对象属性的变化，您还可以使用点语法：$scope.$watch('formData.mail', function(){...})

希望这能有所帮助。

相关文章：