0

我有一个指令，它可以正常工作，当我输入某些内容时，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 = '' 整个输入过程中都保持不变。

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

这有什么原因吗？

4

1 回答 1

1

AngularJS 的经验法则：你ng-model应该总是包含一个点。否则，创建子作用域（如ng-ifor ng-repeat）的 AngularJS 指令将在该子作用域而不是父作用域上创建重复属性。遵循controllerAs 约定可以完全缓解这种行为。

于 2022-02-04T16:53:13.143 回答