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:'='
}

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

1 个答案: