Question

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

但是我需要传递一个过滤的tableLayout。我在范围内创建了一个名为filterFilterFn的函数来过滤值，然后将其传递给我的指令范围。当我这样做时，我得到$ rootScope：infdig错误。

阅读另一个类似的问题，它与使用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

双向绑定导致循环播放，您可以将范围绑定到＆＃39;＆amp;＆＃39;。

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

scope:{ tableLayout:'&' },

来自https://docs.angularjs.org/guide/directive：＆＃34;因此，＆＃39;＆amp;＆＃39;绑定非常适合将回调函数绑定到指令行为。＆＃34;

Answer 2

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

无限摘要正在发生，因为过滤器函数每次都返回一个新数组。如果将变量设置为过滤器的结果，并将表绑定到该变量，则应该可以正常工作。

AngularJS通过自定义过滤器函数$ rootScope：infdig将范围传递给指令

2 个答案: