离子 - AngularJS：离子切换不更新模型答案

【问题标题】：Ionic - AngularJS : ion-toggle doesn't update the model离子 - AngularJS：离子切换不更新模型
【发布时间】：2015-04-22 07:36:09
【问题描述】：

我对 Ionic 框架中的 ion-toggle 指令有一个奇怪的问题。

当像这样使用离子切换时：

<ion-toggle ng-model="testToggle">Test toggle</ion-toggle>

JS：

$scope.$watch('testToggle',function(value) {
    console.log('testToggle changed to '+value);
})

控制器根本没有收到任何更新。

这是 CodePen： http://codepen.io/anon/pen/jPOMqz

您会看到我添加了一个 $interval 将绑定变量更改为随机，以便查看其他所有内容都按预期工作

非常感谢:)

【问题讨论】：

标签： javascript angularjs ionic

【解决方案1】：

我使用ng-change 来检测变化；我在更改时调用函数toggleChange()。所以你的ion-toggle 看起来像：

<ion-toggle ng-model="value" ng-change="toggleChange()">Test toggle</ion-toggle>

您的控制器将更改$scope.value，因此您将从$scope.value 获得切换值：

.controller('ContactCtrl', function($scope, $interval) {
            $scope.value = false;
            console.log('ContactCtrl started');

            $scope.toggleChange = function() {
                if ($scope.value == false) {
                    $scope.value = true;
                } else
                    $scope.value = false;
                console.log('testToggle changed to ' + $scope.value);
            };
        }

这是相同的 Codepen：http://codepen.io/keval5531/pen/LVYROp

【讨论】：

虽然这行得通，但有谁知道为什么会这样？
很好的解决方案，但为什么不在 toggleChange 函数中使用更简单的$scope.value = !$scope.value？

【解决方案2】：

Keval 的答案对我不起作用，因为他正在重置模型的值，这会将切换按钮置于其原始位置。所以正确的答案是创建一个如下所示的切换。

<ion-toggle ng-model=value ng-change="toggleChange()">Test toggle</ion-toggle>

然后编写控制器如下。

.controller('ContactCtrl', function($scope, $interval) {
        $scope.value = false;

        $scope.toggleChange = function() {
            console.log('testToggle changed to ' + $scope.value);
        };
    }

【讨论】：