AngularJS Material - Проблемы с ng-моделью и 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