javascript - AngularJS Material - ng-model 和 ng-change 访问相同对象值的问题

Question

我正在使用 angular-material 并且我有一个 md-switch 项目，其模型是根据 JS 对象中的值设置的。我面临的挑战是，当用户单击开关时，我不想直接更改对象值 - 相反，我想执行对象中的一个函数来为我更改值。

在代码(或下面的 JSFiddle)中，您可以看到切换状态永远不会改变。

这是一个微不足道的例子，所以它没有深入探讨原因，但这样的事情可能吗？

这里是示例代码

HTML

<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
  <md-switch ng-model="data.state" aria-label="Switch 2" class="md-primary" ng-change="data.change()">
    {{ data.state }}
  </md-switch>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
    state: true,
    change: function() {
      this.state = !this.state;
    }
  };
});

这是 JSFiddle 的链接:http://jsfiddle.net/wx8s709z/

Answer 1

问题不在于它永远不会改变，而是你改变了它两次。第一次点击时它会改变，第二次你通过你的功能改变它。因此，如果您将代码注释到调用函数中，您会发现一切正常。

ng-change 是一个事件，表明您的值已更改，然后您可以使用它的值调用另一个函数，仅使用 $scope.data.state