在隔离范围内声明复杂对象

Question

我创建了一个dateRangePicker我声明的指令:

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

我的指令声明如下:

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

问题是我的模板:dateRangePicker.tpl.html初始化子范围(angular-ui的DatePicker组件通过其相应的控制器完成),因此任何尝试将值写入scope.start或scope.end不会影响指令范围.

我想宣布我的孤立范围,以便不会发生冲突:
scope.schedule.start和scope.schedule.end.

我试着这样做:

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

但是会发生以下错误:
Error: 'undefined' is not a function (evaluating 'definition.match(LOCAL_REGEXP)')

有没有办法使用隔离范围实现它？

我只是不想传播范围scope:false(有效,我测试过)以保持良好的封装.

Answer 1

您可以将复杂对象传递到范围,但不使用您使用的语法.您的父作用域应具有计划对象,然后在html中可以执行

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

现在,您可以使用熟悉的语法在隔离范围内使用它

scope :{
     schedule:'='
}