javascript - 从另一个 Controller 更新 ng-repeat 上的复杂过滤器

Question

我有两个 Controller 和一个共享服务。 Controller A 是页面的主视图，包含一个填充有数据的 ng-repeat。 Controller B 包含 Controller A 中 ng-repeat 的过滤选项。这工作得很好，我有一个基本的精简示例，说明我如何在下面进行此工作。

我的问题是:如何在 Controller A 中引入更复杂的过滤？我知道我需要使用一个函数来进行复杂的过滤，这就是问题所在。

angular.module('app').factory('optionService', [/*'stuff'*/, options]);
function options(/*stuff*/){
    var someOption = false;
    var filters = {};
    var service = {
        someOption: someOption,
        filters: filters
    }
    return service;
}

angular.module('app').controller('controllera', ['dataSvc', 'optionService', ctrla]);
function ctrla(dataSvc, optionService){
    var vm = this;
    vm.options = optionService;
    vm.items = dataSvc.getItems();
}

angular.module('app').controller('controllerb', ['optionService', ctrlb]);
function ctrlb(optionService){
    var vm = this;
    vm.options = optionService;

    vm.toggleSomeOption = function(){
        vm.options.someOption = !vm.options.someOption;

        if(vm.options.someOption){
            vm.options.filters.someProperty = 'foo';
        } else {
            delete vm.options.filters['someProperty'];
        }    
    }
}

<div ng-controller="controllera as vm">
    <ul>
        <li ng-repeat="item in vm.items | filter:vm.options.filters">{{item.bar}}</li>
    </ul>
</div>

我试过将过滤方法放入服务中，并将其作为过滤器添加到 ng-repeat 中，但在更新选项时它不会触发。

我是否应该使用事件或 $rootScope 以某种方式通知 controlla controllerb 中的选项已更改并且需要更新(例如，通过手动注入(inject)自定义过滤器并运行它)？

总而言之，我对如何让它发挥作用以及最好的方法感到有点困惑。

Answer 1

是的，我认为更新没有发生，因为当 ControllerB 的范围发生变化时，angular 不知道它也应该检查 ControllerA 的范围。

您可以开始使用 $scope.$apply() 或 $scope.$digest()，但它们非常丑陋，远非“最佳实践” .我宁愿推荐使用 $timeout(func, 0) 因为这也会导致范围的脏检查。所以过程:

• ControllerA 在 optionService 中注册为某种监听器
• ControllerB 更新选项。这会触发事件
• ControllerA 收到触发器并调用 $timeout()。这样它的范围就会知道变化
• $timeout() 立即执行并更新 ControllerA 的范围
• 更改应该在 ng-repeat 中可见。