Declaring complex object in isolated scope

Question

I create a dateRangePicker directive that I declare like this:

<date-range-picker start="schedule.start" end="schedule.end"></date-range-picker>

My directive is declared as the following:

.directive("dateRangePicker", function () {
        return {
            restrict: 'E',
            require: '^form',
            scope: {
                    start: '=',
                    end: '='
            },
            replace: true,
            templateUrl: 'dateRangePicker.tpl.html',
            link: function (scope, elm, attrs, ctrl) {

The issue is that my template: dateRangePicker.tpl.html initializes a child scope (the angular-ui's DatePicker component does it through its corresponding controller), so any attempt to write values to scope.start or scope.end would not affect the directive scope.

I would like to declare my isolated scope, so that the conflict won't occur:
scope.schedule.start and scope.schedule.end.

I tried to do this:

return {
            restrict: 'E',
            require: '^form',
            scope: {
                schedule: {
                    start: '=start',
                    end: '=end'
                }
            }

But this error occurs:
Error: 'undefined' is not a function (evaluating 'definition.match(LOCAL_REGEXP)')

Is there a way to achieve it using isolated scope?

I just don't want to have to propagate the scopes through scope:false (that works, I tested it) in order to keep a good encapsulation.

Answer 1

You can pass complex object to scope but not using the syntax you have used. Your parent scope should have schedule object and then in html you can do

<date-range-picker schedule="schedule"></date-range-picker>

Now you can use it in isolated scope using the familiar syntax

scope :{
     schedule:'='
}