访问子状态以过滤结果

Question

使用 ui-router 我有一个名为 current-transactions 的父视图，其中 table 填充了数据，当用户单击 tr 时，它会进一步显示所选事务的信息，在名为 current-transactions-item.

的子状态中

在 table 中，在父视图中，有一个下拉菜单，我想将其用作子视图中显示的项目的过滤器。所以一次交易可以有多个项目，如果用户选择订单号 foo123 我希望只显示该项目。当我将 text input 插入到与显示结果相同的视图中时，项目被过滤，但是当我将 input 插入到它需要的父状态时，它无法过滤结果.

<input type="text" name="test" ng-model="testFilter">
<div ui-view></div> //child state where the results are, fails to be filtered

我不知道我是否遗漏了一些简单的东西，但我不知道是否要创建自定义过滤器、函数、指令等

我正在使用 ui-router 来路由我的应用程序，并使用 Angular 的 components 来构建它。

问题

如何从父状态中的输入过滤子状态中的结果？

.state('current-transactions', {
    url: '/current-transactions',
    component: 'currentTransactions',
})
.state('current-transactions.current-transaction-item', {
    url: '/{transId}',
    component: 'currentTransaction',
})

//parent state

<input type="text" name="test" ng-model="testFilter">
<div ui-view></div> 

//child state

<div ng-repeat="transaction in $ctrl.patents | filter: testFilter">
    //data from ng-repeat displayed
</div>

更新

找到解决方案并留下我的答案。我使用 $watch 来查找父范围中的更改。如果其他人有解决此问题的其他方法，请随时留下答案。

Answer 1

所以，最终这是一个非常简单的解决方案。我开始创建一个服务，其中父控制器 $watch 输入 testFilter，调用服务中的函数，但后来我意识到，我可以只 $watch 父 $scope来自子控制器，像这样：

//CHILD CONTROLLER
$scope.$watch('$parent.testFilter', function(n, o){
    $scope.transactionsFilter = n
})

然而，我的过滤器依赖于使用 select 输入，并且在 select 输入上使用 $watch 比简单的 text input 要复杂一点，所以我决定使用 ngChange 而不是遵循 Get value when selected ng-option changes. If you want to use $watch follow 说明。

我使用 ngChange 在父控制器中调用了一个函数，该函数将值存储在父范围 $scope.filter 中。在子控制器中，我然后使用“$watch”来观察 select 过滤器中的任何变化。

<select ng-options="item.name for item in data" ng-model="selectedAppOption" ng-change="transactionFilter(selectedAppOption)" > 
    <option value="" selected>Multiple</option>                                 
</select> //send model as parameter

//PARENT CONTROLLER

$scope.transactionFilter = function(filter) {
    $scope.filter = filter; //UPDATED WHEN SELECT VALUE IS CHANGED
}

//CHILD CONTROLLER

//watch for change in $scope.filter in $parent scope
$scope.$watch('$parent.filter', function(n, o){
    $scope.transactionsFilter = n.patentUI.patentApplicationNumber;
})

访问子状态以过滤结果

Accessing child state to filter results

javascript

angularjs

angular-ui-router