AngularJS Passing scope to directive via a custom filter function $rootScope:infdig

Question

I've created simple custom directive in angularJs. In that directive I am passing an array of objects as tableLayout. Please see my working jsfiddle with no errors.

JS Fiddle Working

However I need to pass a filtered tableLayout. I've created a function in the scope called filterFilterFn to filter the values and then pass it into the scope of my directive. When i do this I get a $rootScope:infdig error.

Js Fiddle w/ filterFunction NOT working

Reading another similar problem it was to do with the using the default filter in angularJs. Hence why I've have done a custom filter function in the scope. But I am still getting a same error. Advice on what I am doing wrong would be appreciated.

Non-working code below:

<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'        
    }
})

Jean F. · Accepted Answer · 2015-11-12 05:31:51Z

1

2 way bindings is causing the loop here, you can bind your scope with '&'.

Please check: http://jsfiddle.net/pa13f6gb/1/

scope:{ tableLayout:'&' },

From https://docs.angularjs.org/guide/directive: "Because of this, '&' bindings are ideal for binding callback functions to directive behaviors."

edited Nov 12, 2015 at 5:31

answered Nov 12, 2015 at 4:22

Jean F.

1,7851 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ka Tech Over a year ago

Thanks this works now. Quick question i noticed you use: scope.tableLayout() Pardon my ignorance I haven't this before in binding. Is this required when using & biniding? I know if I don't I get function(a){return h(c,a)}

Jean F. Over a year ago

I would recommend you read this post: stackoverflow.com/questions/30575369/… Feel free to ask if it is not clear enough.

Shaun · Accepted Answer · 2015-11-12 02:40:58Z

0

I wouldn't personally call it a filter, just to avoid confusion with actual angular filters. Yes it's a filtering function.

The infinite digest is happening because the filter function is returning a new array every time. If you set a variable to the result of the filter, and bind the table to that, it should work.

answered Nov 12, 2015 at 2:40

Shaun

9279 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS Passing scope to directive via a custom filter function $rootScope:infdig

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related