访问子状态以过滤结果答案

【问题标题】：Accessing child state to filter results访问子状态以过滤结果
【发布时间】：2023-04-10 16:33:01
【问题描述】：

使用ui-router 我有一个名为current-transactions 的父视图，其中一个表填充了数据，当用户单击tr 时，它会显示所选事务的更多信息，处于一个名为@ 的子状态987654324@.

在表中，在父视图中，有一个下拉列表，我想将其用作子视图中显示的项目的过滤器。所以一个交易可以有多个项目，如果用户选择订单号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 来查找父作用域中的更改。如果其他人有其他解决此问题的方法，请随时留下答案。

【问题讨论】：

您是否尝试过使用$parent 访问父级？
你的意思是在过滤器内？
使用服务在控制器/状态之间共享testFilter。

标签： javascript angularjs angular-ui-router

【解决方案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 .如果您想使用$watch，请按照AngularJS: $watch for a select input 说明操作。

我使用ngChange 在父控制器中调用了一个函数，该函数将值存储在父作用域$scope.filter 中。在子控制器中，我使用 '$watch' 来观察选择过滤器中的任何变化。

<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;
})

【讨论】：