Angularjs过滤器：模型在儿童和flilter父在angularjs

Question

HTML

<div ng-app="myApp" ng-controller="mainCtrl"> 

    <div ng-controller="secondCtrl"> 
     <p>Filtering input:</p> 
     <p><input type="text" ng-model="test"></p> 
    </div> 

    <ul> 
     <li ng-repeat="x in names | filter:test | orderBy:'country'"> 
     {{ (x.name | uppercase) + ', ' + x.country }} 
     </li> 
    </ul> 

</div> 

JS：

<script> 
    var app = angular.module('myApp', []); 
    app.controller('mainCtrl', function($scope) { 
     $scope.names = [ 
      {name:'Jani',country:'Norway'}, 
      {name:'Hege',country:'Sweden'}, 
      {name:'Kai',country:'Denmark'} 
     ]; 
    }); 
    app.controller('secondCtrl', function($scope) { 
    }); 
</script> 

总之此过滤器不能正常工作。

规则1：模型（测试）必须在第二个控制器中。规则2：数据和ng-repeat必须位于mainCtrl中。

谢谢。

Answer 1

你想要完成的事情基本上是基于子控制器的变量在父控制器中过滤值。

执行此操作的一种方法是公开父控制器中的test。

我对ng-model属性做了小的修改。

<div ng-controller="secondCtrl"> 
    <p>Filtering input:</p> 
    <p><input type="text" ng-model="$parent.test"></p> 
</div> 

我已经暴露了同样的母公司控制器，因此在secondCntrl所做的更改将在家长会接触到test和您的过滤器工作正常。

这是它的一个Fiddle。

Answer 2

看那个小提琴：https://jsfiddle.net/j3974so0/

的问题是，在filter声明test变量不是如果输入的ngModel声明相同的变量。

通常变量在父范围中声明并用于子范围，与您要使用的范围相反。

为了让父范围使用子范围的变量范围是注册共享该变量的服务。您指定1和2

https://jsfiddle.net/j3974so0/1/