How to access wrapped variables in a directive?

Question

I have an object which consists of multiple arrays:

$scope.myArrays = {
    array1: ['Pizza', 'Spaghetti'],
    array2: ['Lasagne', 'Schnitzel']
};

Moreover, I have a custom directive to which I want to pass this object myArrays and bind those arrays to scope variables:

<my-directive my-data="myArrays"></my-directive>

---

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            arrayOne: '=myData.array1',
            arrayTwo: '=myData.array2'
        },
        link: function(scope, elem) {
            // get access to scope.array1 and scope.array2
        }
    };
});

All together in a fiddle for you to play around!

Is there a way to bind the arrays directly or do I need to bind arrays: '=myArrays' and access them like arrays.array1?

Answer 1

Binding has to be one to one, you cannot do that. Yes, you will have to access the arrays inside your directive.

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            myData: '='
        },
        link: function(scope, elem) {
           scope.arrayOne = scope.myData.array1;
           scope.arrayTwo = scope.myData.array2;
        }
    };
});

You can directly access scope.myData.array1 and scope.myDate.array2 inside the directive template if you dont have to process these arrays in the link function and get rid of it.