Passing array as directive parameter

Question

Supposedly, I have a directive with scope

scope: {
   columns: '=',
}

How can I achieve this?

<my-directive columns="[{ field:'id', displayName: 'ID' },
                            { field:'title', displayName: 'Title' },
                            { field:'address', displayName: 'Address' },
                            { field:'city', displayName: 'City' }]" />

Apparently Angular's compiler have problems with figuring out that it's an array, although it doesn't have a problem with standard JS objects passed this way - {}. Is there any nifty way to do this? Does the fact that it works with objects is just a coincidence?

Please keep in mind that I know, that I can set this as $scope parameter in Controller and pass just the parameter name from $scope. But I would really like to learn if it's possible to do it straight from HTML.

-- Update with full code:

This is how it is used in template

<es-paged-data-grid columns="[
                                { field:'id', displayName: 'ID' },
                                { field:'title', displayName: 'Title' },
                                { field:'address', displayName: 'Address' },
                                { field:'city', displayName: 'City' }
                            ]">
</es-paged-data-grid>

This is the directive:

app.directive('esPagedDataGrid', function () {
    var definition = {
        restrict: "E",
        replace: false,
        transclude: true,
        scope: {
            columns: '=',
        },
        templateUrl: 'application/directive/pagedDataGrid/PagedDataGrid.html',
        controller: ['$scope', '$element', '$attrs', '$transclude', function($scope, $element, $attrs, $transclude) {

            var dataGridOptions = {};

            if ($scope.columns) {
                dataGridOptions.columnDefs = $scope.columns;
            }

            $scope.dataGridOptions = dataGridOptions;
        }]
    };

    return definition;
});

This is the directive's template:

<div ng-grid="dataGridOptions">
</div>

Why you don't want to define array in controller? HTML seems a bit messy by form you wrote it (aka hardcoded) — Maxim Shoustin
– Maxim Shoustin, Commented Jun 5, 2014 at 14:32
I would try to wrap ALL strings in array with '. Not only values but keys also — Maxim Shoustin
– Maxim Shoustin, Commented Jun 5, 2014 at 14:33
Please, don't go the "why would want to do that" route. You think it's messy like this. I think it's messy to throw configuration variables that are strictly presentation-related into controller. Let's not discuss this. — rattkin
– rattkin, Commented Jun 5, 2014 at 14:42
Using ' doesn't work, unfortunately. My example doesn't work as it is - it throws "Error: [$compile:nonassign] Expression used with directive is non-assignable!" — rattkin
– rattkin, Commented Jun 5, 2014 at 14:43

ryeballar · Accepted Answer · 2014-06-05 18:25:37Z

1

You have mentioned in one of your comments that your directive throws a nonassign error. A nonassign error occurs when a directive attempts to modify an isolate scope defined using the = notation wherein the assigned attribute is an expression that is not two-way data bound(not a scope variable).

Probably somewhere in your directive, you may have attempted to change scope.columns directly such as, scope.columns = []; or any other scope property that is assigned via the = notation. Try removing that and it might solve your problem.

UPDATE:

trying changing this:

 dataGridOptions.columnDefs = $scope.columns;

to this:

 dataGridOptions.columnDefs = angular.copy($scope.columns);

I suspect the ng-grid directive is probably doing some manipulation on the columnDefs options, since columnDefs has a direct reference towards $scope.columns property then any manipulation performed in the columnDefs options would likely affect $scope.columns.

edited Jun 5, 2014 at 18:25

answered Jun 5, 2014 at 16:29

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

5 Comments

rattkin Over a year ago

Hm... you might be onto something here. I've updated my question with my code. Could you take a look at it? I'm not modifying scope.columns, but I'm assigning it to another variable which is then assigned to new scope property. It would look like this cycle is problematic. But, there more I look at it, the more I'm convinced that using = is just an error here. I should use @, as there's no chance for proper binding between directive's scope variable and parent's scope variable, since I'm not specifing it's name, but putting array directly. Right? The error is just a consequence (right?)

ryeballar Over a year ago

Hmm it might be better to create a plunker and recreate the problem altogether for everyone to assess the problem. Using the @ notation on the other hand is simply passing a string to the allocated scope variable. It might work if you use scope.$eval() on the scope attribute property and therein manipulate the data at hand. If you are not restricted in maintaining the directive's state via directive controllers, you can simply access the string in the attr argument e.g. attr.columns and scope.$eval() it for manipulation.

rattkin Over a year ago

That's what I ended up doing it so far it's working fine. But I would still like to know what is going when using = and why it seems so unpredictable. Unfortunately, I'm not familiar with plunkr, but I've written all the parts in original question.

rattkin Over a year ago

Yup, that was it! So, let me get this straight - because this was passed to ng-grid, when it manipulates the whole dataGridOptions object, it triggers bind updates to $scope.columns (which then fail, because they cannot be bound to anything). Since we're doing a (deep?) copy, ng-grid manipulations don't trigger bind updates in original $scope.columns?

rattkin Over a year ago

Thanks for helping me with this, much appreciated!

guru · Accepted Answer · 2014-06-05 14:55:02Z

1

Well AFAIK i guess a way to initialize data in DOM is using the ng-init directive. So the directive can look like,

app.directive('testd', function() {
  return {
    scope: {
      options: "=ngInit"
    },
    link: function(scope, e, a) {
      console.log('test', scope.options);
    },
    template: 'test'
  };
});

And you can supply the array via ng-init,

<div testd ng-init="[{ field:'id', displayName: 'ID' },
                            { field:'title', displayName: 'Title' },
                            { field:'address', displayName: 'Address' },
                            { field:'city', displayName: 'City' }]"></div>

Sample Demo: http://plnkr.co/edit/MwOPLm16KTOr2Q3rY6LK?p=preview

Well one more way would be to pass it via an attribute. Though it will be taken as string, you can use eval() to convert it to object and assign it to a scope variable. Plnkr is also updated for the same. Included columns:"@" and use eval(attrs.columns) to convert it to array

edited Jun 5, 2014 at 14:55

answered Jun 5, 2014 at 14:37

guru

4,0221 gold badge31 silver badges33 bronze badges

6 Comments

rattkin Over a year ago

It certainly is a way, but feels a bit too hacky for now. Are there any others?

guru Over a year ago

Well one more way would be to pass it via an attribute. Though it will be taken as string, you can use eval() to convert it to object and assign it to a scope variable. i have updated my plnkr - plnkr.co/edit/MwOPLm16KTOr2Q3rY6LK?p=preview

guru Over a year ago

this is working fine even with normal scope binding between directive and dom i guess your array syntax is wrong

guru Over a year ago

can you check the plnkr again please. i have updated it

rattkin Over a year ago

Yes, this works. The problem lies somewhat deeper, it seems. My error was showing up for another directive within, that got this argument passed. It would be hard to explain without pasting lots of code and I still have no idea what's wrong with it.

|

Collectives™ on Stack Overflow

Passing array as directive parameter

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related