AngularJS通过自定义筛选函数$rootScope:infdig将作用域传递给指令

Question

我在angularJs中创建了一个简单的自定义指令。在该指令中，我将传递一个对象数组作为tableLayout。请看我的工作jsfiddle没有错误。

JS Fiddle工作

但是，我需要传递一个经过过滤的tableLayout。我在作用域中创建了一个名为filterFilterFn的函数来过滤值，然后将其传递到指令的作用域中。当我这样做时，我会得到一个$rootScope:infdig错误。

Js Fiddle w/filter功能不工作

阅读另一个类似的问题是使用angularJs中的默认过滤器。因此，我在作用域中做了一个自定义过滤器函数。但我还是犯了同样的错误。如果能就我做错了什么提出建议，我们将不胜感激。

以下非工作代码：

<div ng-app="myApp" ng-controller="mainCtrl">
    <script type="text/ng-template" id="/template">
        <button ng-click="testFn()">Test</button>
        <div layout="row">
            <div flex ng-repeat="col in [1,2,3]"><span>HEADER{{$index}}</span>
                <div layout="column">
                    <div flex style="border: 1px solid black;" ng-repeat="row in [1,2,3]">{{$index}}</div>
                </div>
            </div>
        </div>
    </script> 
    <button ng-click="testFn()">Test 2</button>
    <form-table table-layout=formFilterFn('table_id',1)></form-table>
</div>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('mainCtrl', function($scope) {
    $scope.tableLayout =[{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"0","element_name":"Action Reference","sort_order":"0","is_multirow":"1","flex":"30","element_sort_order":"4","is_show":"0"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"1","element_name":"Audit Criteria","sort_order":"0","is_multirow":"1","flex":"30","element_sort_order":"0","is_show":"1"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"3","element_name":"Document Reference","sort_order":"0","is_multirow":"1","flex":"10","element_sort_order":"3","is_show":"1"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"4","element_name":"Findings - General","sort_order":"0","is_multirow":"1","flex":"20","element_sort_order":"1","is_show":"1"},{"head_id":"GAP Assessment","table_id":"1","table_name":"GAP Table","element_id":"5","element_name":"Findings Details","sort_order":"0","is_multirow":"1","flex":"40","element_sort_order":"2","is_show":"1"}]
    $scope.testFn=function(){
       console.log("Test");
   }
   $scope.formFilterFn = function(key,value){
       var output = [];
       var input = $scope.tableLayout;
       for (var x =0; x < Object.keys(input).length; x++){                                  
           if (input[x][key]==value){                                       
               output.push(input[x]);                                   
           }                                        
       }    
       return output;
   }
});
app.directive('formTable', function() {
    return {
        scope:{tableLayout:'='},
        link: function(scope,element,attrs){ // normal variables rather than actual $scope, that is the scope data is passed into scope
                    scope.column=[1,2,3];
                    scope.testFn=function(){
                        console.log(scope.tableLayout);
                    }

                    //function and scopes go here
                },//return
        transclude:true,
        templateUrl: '/template',
        restrict: 'E'        
    }
})

Answer 1

双向绑定导致循环，您可以使用'&'绑定您的作用域。

请检查：http://jsfiddle.net/pa13f6gb/1/

scope:{ tableLayout:'&' },

发件人https://docs.angularjs.org/guide/directive:"正因为如此，'&'绑定非常适合将回调函数绑定到指令行为。"

Answer 2

我个人不会称之为filter，只是为了避免与实际的角度滤波器混淆。是的，这是一个过滤功能。

由于filter函数每次都会返回一个新数组，因此会出现无限摘要。如果将一个变量设置为过滤器的结果，并将表绑定到该结果，它应该可以工作。