ng-keyup 触发但在指令模板内与 ng-if 一起使用时无法正确读取

Question

我有一个指令，它在某种程度上工作得很好，当我输入一些东西时，指令中的 search() 作用域函数会触发并用输入文本设置 $scope.query。

这是指令模板

<div class="container">
    <div class="system-filter-header">
        <div class="no-gutter">
            <div class="system-search-wrapper search-wrapper-width">
                <i ng-click="search($evt)" class="fa fa-search"></i>
                <input type="text" ng-keyup=search($evt)  class="search pull-left suggesstions-styles"
                ng-model="query" ng-attr-placeholder="Search...">
            </div>
        </div>
    </div> 
</div>

这里是被触发的作用域函数

$scope.search = function() {
          console.log($scope.query.length)
}

但是当我在模板的第一行使用 ng-if="true" 时（true 仅用于泛化，我想在里面做一个不同的条件检查ng-if) 这样，

<div class="container" ng-if="true">

search 仍然被触发，但 console.log 始终给出 0，并且它似乎没有更新 $scope.query 值，因为它保持为 $scope.query = '' 在整个打字过程中。

编辑这是一个具有几乎相似行为的 example codepen。问题出在 searchBox 指令上，我已将 ng-if=true 添加到模板，但搜索不起作用。当我删除 ng-if 时，搜索工作正常。

有什么原因吗？

Answer 1

AngularJS 中的经验法则：your ng-model should always include a dot. Otherwise AngularJS directives that create child scopes (like ng-if or ng-repeat) will create a duplicate property on that child scope instead of the parent scope. Following the controllerAs convention 完全缓解了这种行为。

ng-keyup 触发但在指令模板内与 ng-if 一起使用时无法正确读取

ng-keyup firing but not reading properly when used with an ng-if inside a directive template

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-if