angular 指令数据绑定发生在 ng-change 之后 [英] angular directive data binding happens after ng-change

问题描述

伙计们，我正在尝试一些东西.

模板

指令 my-checkbox(用 coffeescript 编写)

angular.module('myApp').directive('myCheckbox', ()->返回 {限制:'A'替换:真的，模板: """<div><input type="checkbox" ng-model="ngModel" ng-change="ngChange()" ng-click="ngClick()">

"""范围: {ngChange: "&"ngClick: "&"ngModel:="}})

观察

当您选中复选框时，函数 triggerChange() 会触发，但 object.isChecked 值不会更改.然后函数 triggerClick() 会随着 object.isChecked 值的变化而触发.

我想知道，是不是真的，数据绑定="发生在 ng-change 之后?

解决方案

参见:ngModelOptions

<块引用>

允许调整模型更新的完成方式.使用 ngModelOptions，您可以指定一个自定义事件列表，这些事件将触发模型更新和/或去抖动延迟，以便实际更新仅在计时器到期时发生；此计时器将在发生另一次更改后重置.

例如，试试这个:

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

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?

解决方案

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}" />

这篇关于angular 指令数据绑定发生在 ng-change 之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！