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

【问题标题】：AngularJS Passing scope to directive via a custom filter function $rootScope:infdigAngularJS通过自定义过滤函数$rootScope：infdig将范围传递给指令
【发布时间】：2015-11-12 01:47:45
【问题描述】：

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

JS Fiddle Working

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

Js Fiddle w/ filterFunction NOT working

阅读另一个类似的问题，它与在 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'        
    }
})

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

2 路绑定导致此处出现循环，您可以使用 '&' 绑定范围。

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

scope:{ tableLayout:'&' },

来自https://docs.angularjs.org/guide/directive： “正因为如此，'&' 绑定非常适合将回调函数绑定到指令行为。”

【讨论】：

感谢这工作。我注意到你使用的快速问题：scope.tableLayout() 请原谅我的无知，我以前在绑定中没有这个。使用＆biniding时是否需要这样做？我知道如果我没有得到 function(a){return h(c,a)}
我建议你阅读这篇文章：stackoverflow.com/questions/30575369/…如果不够清楚，请随时询问。

【解决方案2】：

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

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

【讨论】：