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

Question

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

包含列表的部分显示/隐藏时ng-show或ng-hide表现正常.当ng-if被使用时,列表不能被过滤.

演示

• 由于使用此版本不起作用ng-if
• 此版本由于使用而确实有效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 开始）

被认为是原语（MDN）。

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

这大致就是原型继承背景下原语的本质。

这可以在你的坏小提琴的修改版本中清楚地观察到。

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

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

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

ng-model="obj.filterText"

现在您应该可以很好地使用ngIf,来命名一些创建新作用域的 Angular 提供的指令ngSwitch。ngRepeat

有关该主题的资源

• 理解范围@角度
• 米斯科关于该主题的演讲
• Mark Rajcok 的 stackoverflow 回答
• 点@egghead.io
• 谷歌搜索“dot ng模型”