Question

我需要对某些项目进行基本搜索。我做了一个简单的控件，有一个清除搜索查询的按钮：

<div class="item item-input item-button-right">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="text"
           placeholder="Search"
           ng-model="search">

    <button class="button button-icon" ng-if="search" ng-click="search = null">
        <i class="icon ion-ios-close-empty"></i>
    </button>
</div>

然而按钮不起作用。 search变量已正确更新，但更改未反映在视图中。

经过一番挖掘后，我将查询字符串包装到一个对象中，生成一个变量search.query：

<div class="item item-input item-button-right">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="text"
           placeholder="Search"
           ng-model="search.query">

    <button class="button button-icon" ng-if="search.query" ng-click="search.query = null">
        <i class="icon ion-ios-close-empty"></i>
    </button>
</div>

令人惊讶的是，这可以按预期工作：单击按钮时清除查询。

这怎么可能？范围变量的angular威胁是否与那些直接在范围内的变量区别开来？

Answer 1

试

ng-click="$parent.search = null"

ng-if creates child scope，因此search绑定到ng-if

的范围

Answer 2

它是关于范围继承的，它基于javascript原型继承。

搜索 - 在这种情况下，它只是一个值，将在ng-if

创建的范围内被覆盖

search.query - 在这种情况下，它是搜索对象属性的链接，它也将被更改为父范围。

对范围变量的双向绑定仅在包装在对象中时起作用

2 个答案: