为什么AngularJS过滤器在ng-if中不起作用？

Question

我有一个简单的 AngularJS 页面，其中包含在单击链接时显示和隐藏的不同部分。其中一个区域有一个可以过滤的重复列表。

当包含列表的部分以ng-show 或ng-hide 显示/隐藏时，它会正常运行。使用ng-if时，无法过滤列表。

演示

• This version does not work due to the use of ng-if
• This version does work due to the use of ng-show

---

示例 HTML

<nav>
    <a href="javascript:{}" ng-click="area='one';">Area 1</a>
    <a href="javascript:{}" ng-click="area='two';">Area 2</a>
</nav>

<div ng-if="area==='one'">
    <h3>Area 1!</h3>
    <input type="text" placeholder="filter list..." ng-model="filterText" />
    <ul>
       <li ng-repeat="item in list | filter: listFilter">
           {{item.id}} - {{item.name}}
       </li>
    </ul>
</div>

<div ng-if="area==='two'">
    <h3>Area 2!</h3>
    <p>Stuff here...</p>
</div>

角度示例

$scope.area="one";
$scope.filterText="";

$scope.list = [
    {id:1, name:"banana"},
    {id:2, name:"apple"},
    {id:3, name:"orange"},
    {id:4, name:"pear"},
    {id:5, name:"apricot"}
];

$scope.listFilter = function(item){
    var term = $scope.filterText.trim().toLowerCase();
    return item.id.toString().indexOf(term) > -1 || item.name.indexOf(term) > -1;
};

Answer 1

我自己没有原型继承这一主题的硕士学位，但我会尽快解释一下（关于这个主题有大量资源）；

• Number
• String
• Boolean
• null
• undefined
• Symbol（从 ES6 开始）

被视为primitives (MDN)。

现在 - 当您从父作用域“继承”原语时，实际发生的是子作用域“镜像”或“遮蔽”给定的原语值。因此，您可以将其视为上述内容的副本。

这大致是原型继承上下文中原语的本质。

这可以在modified version of your broken fiddle 中清楚地观察到。

尝试使用这两个输入，当您只触摸外部输入（即子值“遮蔽”父值）时，您会看到两个值之间存在联系。但是，一旦您触摸内部输入，这些值就会相互断开。

---

推荐解决这个问题的方法是使用 reference 到模型上的属性（我说的是模型，但实际上它只是一个 JS 对象），即进一步定义原型链；

$parentScope.obj = { filterText: '' };

ng-model="obj.filterText"

现在您应该可以使用 ngIf、ngSwitch、ngRepeat 来列举一些创建新范围的 Angular 提供的指令。

有关该主题的资源

• understanding scopes @ angular
• presentation by misko on the subject
• stackoverflow answer by Mark Rajcok
• the dot @egghead.io
• google search 'dot ng model'