指令ngChange会像组合框选项一样多次触发

时间:2016-10-31 16:51:13

标签: angularjs angularjs-directive angularjs-ng-change

我有一个国家的下拉,没什么'花哨的。我唯一的奇怪的要求是我希望能够从我的控制器传递一个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>

页面HTML和指令模板之间的唯一区别是我将ng-Change添加到页面上的HTML。

我的指令中有一点需要注意,我正在使用require: '^ngChange'

我不知道为什么它没有记录得很好,但它可以解决所有问题并解决在更新范围和其他更改问题之前与更改事件触发相关的其他问题所带来的所有问题。

然而,这种优雅的代价是我的countryChanged()函数被触发x次,其中x是下拉列表中的项目数。我假设因为一次只能观察一个项目,所以变化一直在发生?

所以我的主要问题是:如何保持这种优雅,但每次更改只会使ng-Change发射一次?

编辑关闭选择ngOptions而不是选项ngRepeat解决了我的问题,而不是同步,而不是我的ngChange在指令中触发x次的主要问题。< / p>

1 个答案:

答案 0 :(得分:2)

我猜问题是setValue:&#39; = ngChange&#39;

我将其更改为setValue:&#39;&amp; ngChange&#39;并添加了ng-change =&#34; setValue()&#34;到<select/>

现在,当您更改它时,它只触发一次(验证控制台日志)。

我更新了plunker https://plnkr.co/edit/xYi4uoNLeJVvKAoZhjbH?p=preview