Question

当用户选择取消选项时，我尝试将切换/复选框值更新回默认值/关闭。目前它坚持Red / On。

任何有关解决这个问题的建议都会很棒，

之前
enter image description here

的警报

的后

控制器

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $scope.turnClearAppData = 'Off';
        }
      });
    }
  };

HTML

    <li class="item item-toggle noborder">
      Clear App Data {{turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="showConfirm(turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
    </li>

Answer 1

在更新范围变量值不更新相关更改的情况下，尝试使用$timeout。试试这个。

// Default Value
  $scope.turnClearAppData = 'Off';
  // Ionic OK Alert
  $scope.showConfirm = function(val) {
    if ( val == 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          $localStorage.$reset();
          // Redirect After Reset
          $location.path('/intro/part-one');
        } else {
          // On Cancel Update Value
          $timeout(function () {
             $scope.turnClearAppData = 'Off';
          }, 0);
        }
      });
    }
  };

Answer 2

问题在于范围我前几天answered提出一个问题，其中有一些教程的链接，他们告诉你为什么要避免使用范围作为模型。

最佳解决方案是避免$scope附加您的视图模型。

您可以查看样本有效的plunker。

我使用了ControllerAs语法来解决问题。

这很容易实现。在我的plunker中，我已经在状态中定义了ControllerAs：

.state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeController as vm'
});

但您可以通过许多其他方式实现：

<div ng-controller="HomeController as vm">

</div>

现在，在控制器中

创建视图模型：

.controller('HomeController', function($scope, $state, $timeout, $ionicPopup)     {

   var vm = this;

   vm.turnClearAppData = 'Off';

   vm.showConfirm = function(val) {
     if ( val === 'On') {
      var confirmPopup = $ionicPopup.confirm({
        title: 'Clear App Data',
        template: 'Select OK to Confirm!'
      });
      confirmPopup.then(function(res) {
        if(res) {
          // Reset LocalStorage Data
          // $localStorage.$reset();
          // Redirect After Reset
          // $location.path('/intro/part-one');
          alert('Ok pressed!');
        } else {
          // On Cancel Update Value
          vm.turnClearAppData = 'Off';   
          return vm.turnClearAppData;
        }
      });
    }
  };

});

注意var vm = this作为第一个表达式。现在，所有对象和方法都映射到viewmodel（vm）。

您的HTML现在可以使用viewmodel

<li class="item item-toggle noborder">
      Clear App Data {{vm.turnClearAppData}}
       <label class="toggle toggle-assertive">
         <input type="checkbox" ng-model="vm.turnClearAppData" ng-true-value="'On'" ng-false-value="'Off'" ng-change="vm.showConfirm(vm.turnClearAppData)">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
</li>

获得预期的行为。

离子更新复选框值

2 个答案: