意外的 ng-ui-bootstrap 预输入行为

Question

Tl;dr: 将绑定到 ng-if 属性的布尔值翻转为 false 时，具有 ng-if 属性的元素将保留在 DOM 中，直到恰好选择了三个其他元素。为什么布尔值翻转为false后元素没有立即消失？

我有一个 typeahead 设置，带有一个 typeahead-no-results 布尔值附加到一条警告消息，看起来像这样

<input class="full-width" id="customerParentInput" 
       ng-model="$ctrl.customer.customerParentId"
       uib-typeahead="option.value as option.key for option in $ctrl.customerLookupData.data | filter:$viewValue | limitTo:10"
       typeahead-no-results="$ctrl.noResultParent"/>
<label ng-if="$ctrl.noResultParent" class="text-danger">No results. Create new customers in the Customer page in the Settings tab.</label>

我认为预先输入的一个已知问题是，当您有 0 个结果并且清空文本框时，布尔值不会翻转回 false。因此，使用空文本框时，我的标签仍会出现在 DOM 中。

所以我设置了一个事件监听器，等待输入失去焦点。一旦它确实失去焦点，它会查看布尔值是否仍然为真，以及文本框是否有任何值。

这是代码。

setListener = () => {
    $('#customerParentInput').blur(() => {
        var inputVal: string = $('#customerParentInput').val();
        if (this.noResultParent === true && inputVal.length === 0) {
            this.noResultParent = false;
        }
    });
};

所以这会强制我的标签附加到的布尔值等于 false。所以理论上这应该会让标签消失。

这就是问题所在。标签将在 DOM 中保持可见，直到我单击 DOM 中的其他三个元素。

例如，

我在文本框中输入

没有找到结果，我会转移焦点，警告仍然存在，有道理。

我返回，删除所有文本，失去焦点。

我的监听器启动，布尔值设置为 false，但标签仍然存在。

我点击三个不同的输入框，然后我的标签就会消失。

有人知道为什么这是让我的标签消失的必要部分吗？一旦布尔值翻转为假，我能做些什么来使标签立即消失吗？

Answer 1

所以，为了修复输入文本为空时显示的标签，也许这样会更好：

<label ng-if="$ctrl.noResultParent && $ctrl.customer.customerParentId.length > 0" class="text-danger">No results. Create new customers in the Customer page in the Settings tab.</label>

也许其他问题也可以解决