单击时调用 ng-if 函数

Question

我在 Plnkr 上有我的代码：

http://plnkr.co/edit/6wz4zub2sEOfhrqps0c8

html代码很简单：

   <div ng-app="myApp" ng-controller="MainCtrl">
     <div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>
       <div ng-repeat="item in Items">
         <item-input></item-input>
       </div>      
     </div>
   </div>

基本上，问题是每次单击页面上的任何位置时都会调用 ng-if 中的函数。我认为它与 multi-select 控件有关，但我不确定应该在哪里修复它。感谢任何帮助。

谢谢。

已更新

我不太明白的是，当我注释掉 multi-select 下拉列表 (<div ng-dropdown-multiselect="" options="myData" selected-model="myModel" extra-settings="mySettings" events="myEvents"></div>)?

时，为什么这种行为会停止

Answer 1

如下图所示，取自 Chrome DevTools，multi-select 下拉菜单生成两个点击事件处理程序：

一个事件在按钮上，一个在整个文档上。因此，单击文档至少会触发最后一个事件处理程序，这可能会更改模型。 Angular 然后做一个摘要循环，这意味着绑定到 ngIf 指令的 displayMe 函数被评估，以防元素应该从 DOM 中删除。

如果您删除下拉组件，并因此删除这两个点击处理程序，您将剩下 3 个文本输入。事实上，现在点击文档后没有摘要，因为没有执行任何处理程序，但您仍然可以通过在输入元素中键入来触发摘要。

This answer by Miško Hevery 在 Angular 1.x.

中有一些关于脏检查过程的有价值的信息

单击时调用 ng-if 函数

ng-if Function Gets Called on Click

angularjs

angularjs-directive

angularjs-ng-repeat