angular directive data binding happens after ng-change

问题

Guys I'm experimenting something.

template

<input my-checkbox type="checkbox" ng-model="object.isChecked" ng-change="triggerChange()" ng-click="triggerClick()">

directive my-checkbox (written in coffeescript)

angular.module('myApp')
  .directive('myCheckbox', ()->

    return {
      restrict: 'A'
      replace: true,
      template: """
                <div>
                    <input type="checkbox" ng-model="ngModel" ng-change="ngChange()" ng-click="ngClick()">
                </div>
                """
      scope: {
        ngChange: "&"
        ngClick: "&"
        ngModel: "="
      }

      }
  )

Observation

When you check the checkbox, function triggerChange() fires but, object.isChecked value doesn't change. Then function triggerClick() fires with object.isChecked value changes.

I'm wondering, is it true, the data binding "=" happens after ng-change?

回答1:

See: ngModelOptions

Allows tuning how model updates are done. Using ngModelOptions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.

For example, try this:

<input type="text" ng-model="term" ng-change="fn(term)" ng-model-options="{debounce: 750}" />

来源：https://stackoverflow.com/questions/18860357/angular-directive-data-binding-happens-after-ng-change