javascript - angularjs 应用过滤器交叉嵌套指令(过滤器也适用于 child ，即使它与 parent 不匹配)？

Question

我是 Angular 的新手，刚刚创建了一个带有搜索过滤器的 Angular 树...它加载嵌套数据然后作为树获取。

我希望过滤器也适用于子节点，即使它与父节点不匹配，所以一旦我使用过滤器，即使输入与父节点不匹配，子节点仍会显示。

感谢 KayakDave，我纠正了我的愚蠢问题

plnkr: http://plnkr.co/edit/5l7sFw?p=preview

代码:

    app.directive('angularTree', function() {
    return {
        restrict: 'E',
        scope: {
            treeData: '='
        },
        templateUrl: 'tree.html',
        link: function(scope, element, attrs) {
            // Some tree logic here
            // after done, pass data to directive
            scope.tree_data = scope.treeData;

            // Filter
            scope.tree_filter = function(obj) {
                // Filter here
            };
        }
    }
})
//ul inside tree
    .directive('treeBody', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                tree: '=',
                treeFilter: '='
            },
            template: '<ul class="tree"><node ng-repeat="node in tree | filter:treeFilter" child-filter="treeFilter" node="node"></node></ul>'
        }
    })
// li & child
    .directive('node', function($compile) {
        return {
            ......
            scope: {
                node: '=',
                childFilter: '='
            },
            template: '<li>{{node.name}}</a></li>',
            link: function(scope, element, attrs) {
                var childTem = '<tree-body tree="node.children" tree-filter="childFilter"></tree-body>';
                // Append child
                   .......
                }
            }
        }
    })

Answer 1

如果父节点的子节点可见，则您希望父节点可见 - 一种选择是为树中的每个节点添加一个属性(类似于 ngRepeat 添加 $$hashKey 的方式) 指示该节点是否匹配测试并且是否可见。我将在下面的代码中调用该属性 show。

然后，当搜索完成后，每个节点的 show 属性都会被设置。然后 parent 可以检查他们所有的 child ，看看是否有任何 child 是可见的。

并且我们可以依靠 $digest 的脏检查来确保在确定父级最终可见性之前正确设置所有子级。

如果任何 child 的 show 属性设置为 true，此递归函数将返回 true。

function checkChildren(nextl) {
     var i, showNode=false;
     if (nextl) {
        for (i = 0;i < nextl.length;i++) 
           showNode |= nextl[i].show | checkChildren(nextl[i].children);
     }
     return showNode;
}

在过滤器中，我们根据每个节点是否匹配过滤器来标记每个节点，然后如果节点匹配或者它的任何子节点匹配则返回 true 给过滤器:

// Filter
scope.tree_filter = function(obj) {
  var reg = new RegExp(scope.search, 'i');
  var showNode = !scope.search || reg.test(obj.name);

  obj.show = showNode;
  return (showNode | checkChildren(obj.children)) ;
};

updated fiddle