Angular directive parameter length limit

Question

Is there a length limit for a parameter that is sent to a directive? Here is my code:

header = JSON.stringify(header);
columnObj = JSON.stringify(columnObj);
$compile('<div column-filter-sort header=' + header + ' columnobj=' +     columnObj + '></div>')(scope);

Directive:

a.directive('columnFilterSort', function () {
return {
    link: function (scope, elem, attrs) {
        var columnObj = JSON.parse(attrs.columnobj);
        var header = JSON.parse(attrs.header);
}
});

Var columnObj looks fine, but it fails at var header = JSON.parse(attrs.header); Checking var header I see that it's not complete. The error I am getting is: SyntaxError: Unexpected end of input at Object.parse (native)

Please help.

Thanks

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

First change your compile to:

$compile('<column-filter-sort header="' + header + '" columnobj="' +     columnObj + '"></div>')(scope);

Second change directive to:

a.directive('columnFilterSort', function () {
return {
    restrict: 'E',
    scope: {
            'header' : '=',
            'columnobj' : '='
         },
    link: function (scope, elem, attrs) {
        var columnObj = JSON.parse(scope.columnobj);
        var header = JSON.parse(scope.header);
}
});

That should do the trick. For more details check this post how to pass a json as a string param to a directive

BTW, you can also pass the JSON to the global scope at the first JS section and consume it without using isolation scope in the directive.

edited May 23 '17 at 10:28

Community

1
1

answered Dec 28 '15 at 21:07

Amir Katz

1,027
1
10
24

The reason that is works because compile need to wrap the json with quotation mark. and the trick was to pass the json to isolation scope at the directive with double binding instead of using the attributes. @Toni thanks for the feedback – Amir Katz Dec 28 '15 at 21:14
I am not sure but now it's not even getting into the directive. – Mark Dec 28 '15 at 21:17
And the error is Error: [$parse:ueoe] http://errors.angularjs.org/1.4.7/$parse/ueoe?p0=%7B at Error (native) – Mark Dec 28 '15 at 21:25
Please check my last edit on placing the column-filter-sort as element since restricting that in the directive – Amir Katz Dec 28 '15 at 21:29
I have changed my compile to this $compile('')(scope); – Mark Dec 28 '15 at 21:37
And still I am not getting into the directive. Console shows same parse error. – Mark Dec 28 '15 at 21:37
I only can get into the directive if I comment out isolated scope in there. – Mark Dec 28 '15 at 21:39
Where are you using the compile? Can you post that code? – Amir Katz Dec 28 '15 at 21:51

Angular directive parameter length limit

1 Answers1