How do I pass any array from ng-repeat to AngularJs attribute directive?

Question

I have a list of hierarchy of menu items where each item has a child list. For The menuItems property is from the controller scope(list of parents). I want to pass an array to be consumed by the directive on both levels of the following example.

Html Code

<div sortable="menuItems">
    <div ng-repeat="item in menuItems">
        ...
        <div sortable="item.Children">
            <div ng-repeat="child in menuItems.Children">...</div>
        </div>
    </div>
</div>

Directive code

app.directive('sortable', function ($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $elem, attrs) {
         // I need access by the array in here.
        }
    };
});

I have set the sortable attribute to the value of the name of the list which obviously is not working for me.

GregL · Accepted Answer · 2016-03-16 02:19:07Z

1

You can set up a scope watch (or collection watch), since the value of the attribute is the scope expression.

app.directive('sortable', function ($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $elem, attrs) {
             $scope.$watchCollection(attrs.sortable, function (newCollection, oldCollection) {
                 // (do something with newCollection)
             });
        }
    };
});

answered Mar 16, 2016 at 2:19

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

4 Comments

jwize Over a year ago

says attrs is not defined so I must be doing something wrong here

GregL Over a year ago

Is attrs the exact name of the 3rd parameter to the link function? Or are you calling it $attrs in the function params and then trying to refer to attrs in the function body?

jwize Over a year ago

attrs.sortable is a string, not a collection, so until I get the array I haven't solved my issue. I need the array from the directive attribute sortable="menuItems" somehow to be available in my link function.

GregL Over a year ago

@jwize Yes, that is exactly what you get inside the watch listener function - newCollection will be that array. By watching the attrs.sortable string, AngularJS will evaluate that expression and invoke the listener once initially and then afterwards for any changes.

jwize · Accepted Answer · 2016-03-17 00:27:08Z

0

The problem was the isolate-scope for the directive was not set.

app.directive('sortable', function ($timeout) {
    return {
        restrict: 'A',
        link: function ($scope, $elem, attrs) {...},
        scope: { items: '=' }
    }

   <div id="sortable-basic" sortable items="menuItems">

answered Mar 17, 2016 at 0:27

jwize

4,2051 gold badge36 silver badges61 bronze badges

Collectives™ on Stack Overflow

How do I pass any array from ng-repeat to AngularJs attribute directive?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related