指令 ngChange 触发次数与组合框选项一样多
Directive ngChange fires as many times as combobox options
我有一个国家/地区下拉菜单,没什么特别的。我唯一的古怪要求是我希望能够从我的控制器传递一个 OnChange 函数,以便指令可以 运行 它。 Here is a Plunker
在 Plunker 中,我有这个基本模板:
<div>
<label for="countryDirective">Country</label>
<select id="countryDirective" ng-model="country" ng-Change="countryChanged()" ng-options="obj.value as obj.name for obj in countries">
<option value="">Choose Your Country</option>
</select>
<span>{{country}}</span>
</div>
On-Page HTML 和指令模板之间的唯一区别是我在 On-Page HTML.
上添加了 ng-Change
我的指令中有一点要注意,我正在使用 require: '^ngChange'
。
我不知道为什么没有很好地记录它,但它创造了奇迹并解决了与范围更新之前的更改事件触发相关的其他问题和其他更改问题所带来的所有问题。
然而,这种优雅的代价是我的 countryChanged() 函数被触发 x 次,其中 x 是下拉列表中的项目数。我假设是因为一次观察一个项目,所以变化不断发生?
所以我的主要问题是:如何保持这种优雅,同时让 ng-Change 每次更改只触发一次?
编辑: 结果切换到 select ngOptions 而不是选项 ngRepeat 解决了我的问题,他们没有同步,但不是我的 ngChange 的主要问题在指令中触发 x 次。
我猜问题出在 setValue: '=ngChange'
我将其更改为 setValue: '&ngChange' 并将 ng-change="setValue()" 添加到 <select/>
现在它只在您更改时触发一次(验证控制台日志)。
我更新了 plunker https://plnkr.co/edit/xYi4uoNLeJVvKAoZhjbH?p=preview
我有一个国家/地区下拉菜单,没什么特别的。我唯一的古怪要求是我希望能够从我的控制器传递一个 OnChange 函数,以便指令可以 运行 它。 Here is a Plunker
在 Plunker 中,我有这个基本模板:
<div>
<label for="countryDirective">Country</label>
<select id="countryDirective" ng-model="country" ng-Change="countryChanged()" ng-options="obj.value as obj.name for obj in countries">
<option value="">Choose Your Country</option>
</select>
<span>{{country}}</span>
</div>
On-Page HTML 和指令模板之间的唯一区别是我在 On-Page HTML.
上添加了 ng-Change我的指令中有一点要注意,我正在使用 require: '^ngChange'
。
我不知道为什么没有很好地记录它,但它创造了奇迹并解决了与范围更新之前的更改事件触发相关的其他问题和其他更改问题所带来的所有问题。
然而,这种优雅的代价是我的 countryChanged() 函数被触发 x 次,其中 x 是下拉列表中的项目数。我假设是因为一次观察一个项目,所以变化不断发生?
所以我的主要问题是:如何保持这种优雅,同时让 ng-Change 每次更改只触发一次?
编辑: 结果切换到 select ngOptions 而不是选项 ngRepeat 解决了我的问题,他们没有同步,但不是我的 ngChange 的主要问题在指令中触发 x 次。
我猜问题出在 setValue: '=ngChange'
我将其更改为 setValue: '&ngChange' 并将 ng-change="setValue()" 添加到 <select/>
现在它只在您更改时触发一次(验证控制台日志)。
我更新了 plunker https://plnkr.co/edit/xYi4uoNLeJVvKAoZhjbH?p=preview