Javascript AngularJS指令的动态选项

我试图将动态变量传递到一个显示时间选择器的指令中（pickadate.js:）。然而，我正在为如何将选项纳入指令而苦苦挣扎。我在互联网上搜索了一下，但是看到了很多方法，我不知道如何最好地构建它，因为它不起作用。这是我目前的代码：

指令：

// Pick a date directive used as pick-a-time on HTML element
appDirectives.directive('pickATime', function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            element.pickatime(scope.$eval(attrs.pickATime));
        },
        scope: {
            timeOptions: '=options'
        },
        templateUrl: '../Templates/timeoptions.html'
    };
});

appDirectives.directive('pickATime', function() {
return {
    // Restrict it to be an attribute in this case
    restrict: 'A',
    // responsible for registering DOM listeners as well as updating the DOM
    link: function(scope, element, attrs) {
        element.pickatime(scope.options());
    },
    scope: {
        options: '&pickATime'
    },
};
});

指令模板：

Min: {{timeOptions.startTime}} Max: {{customerInfo.endTime}}

HTML:

<input type="text" placeholder="Start Time" id="timestart" pick-a-time options="timeRange" data-ng-model="itemtimestart" class="form-control" autocomplete="off">

对输入有效的非动态方法如下所示：

<input type="text" placeholder="End Time" id="timeend" pick-a-time="{min: [0,0], max: [23,30]}" data-ng-model="itemtimeend"class="form-control" autocomplete="off">

时间选项日志：

 time options log undefined

指令（记录时未定义timeOptions）：

模板：

Min: {{timeOptions.startTime}} Max: {{customerInfo.endTime}}

min: {{timeOptions.min}}, max: {{timeOptions.max}}

控制器（正确注销）：

HTML:

指令：

// Pick a date directive used as pick-a-time on HTML element
appDirectives.directive('pickATime', function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            element.pickatime(scope.$eval(attrs.pickATime));
        },
        scope: {
            timeOptions: '=options'
        },
        templateUrl: '../Templates/timeoptions.html'
    };
});

appDirectives.directive('pickATime', function() {
return {
    // Restrict it to be an attribute in this case
    restrict: 'A',
    // responsible for registering DOM listeners as well as updating the DOM
    link: function(scope, element, attrs) {
        element.pickatime(scope.options());
    },
    scope: {
        options: '&pickATime'
    },
};
});

用法：

<input ng-if="timeRange" type="text" placeholder="Start Time" id="timestart" pick-a-time="timeRange" data-ng-model="itemtimestart" class="form-control" autocomplete="off">

---

如果选项已经存在（在

时间范围中）并且不会随时间而改变，则您无需做任何事情：它应该在
范围内。时间选项（在链接和控制器中）

但是，如果选项可以随时更改，并且您希望在更改时刷新组件，则需要注意其更改：

scope.$watch('timeOptions', function(newOptions) {
  // do something with the newOptions
});

有许多不同的方法可以将数据从父范围传递到指令中。您已经（正确地）选择了由独立作用域提供的选项类，如

scope: {
}

指令的参数。这意味着您的指令的作用域不会典型地从父作用域继承

第一个示例不起作用的原因是：

element.pickatime(scope.$eval(attrs.pickATime));

最终将未定义的内容传递给element.pickatime（）方法

这是因为这行代码所做的是尝试根据指令的作用域计算DOM中的pick-a-time html属性值中包含的表达式（字符串）。在第一个示例中，pick-a-time属性的值是一个空字符串

使用“非动态”版本时，拾取时间属性的值现在是字符串

"{min: [0,0], max: [23,30]}"

这是一个有效的角度表达式，$eval将返回一个对象，其最小和最大属性分别设置为[0,0]和[23,30]，因此指令有效

在这两种情况下，指令都会完全忽略传递给带有options属性的指令的值

一个简单的修复方法是修改指令以使用通过options属性传入的信息。按照编写指令的方式，此对象将双向绑定到$scope.timeOptions值（稍后将对此进行详细介绍）。本质上，对$scope.timeOptions的任何更改都将显示在父作用域的timeRange属性中，反之亦然

对您的指令的更改将使用：

element.pickatime(scope.timeOptions);

额外学分：

在上一个示例中，您声明timeOptions在指令中未定义。这是因为html需要：

<input type="text" placeholder="Start Time" id="timestart" pick-a-time time-options="timeRange" data-ng-model="itemtimestart" class="form-control" autocomplete="off">

使用方法：

更新dot标记问题：

在控制器中，需要为itemtimestart使用点表示法：

.controller('xxx', function($scope){
    $scope.parameters = {
    }
}

<input ng-if="timeRange" type="text" placeholder="Start Time" id="timestart" pick-a-time="timeRange" data-ng-model="parameters.itemtimestart" class="form-control" autocomplete="off">

$scope.paramters.itemtimestart should now be the correct time.

.controller（'xxx'，function（$scope）{
$scope.parameters={
}
}
$scope.parameters.itemtimestart现在应该是正确的时间。

您还可以通过使用“controller as”语法来简化此过程

所以我的代码应该可以工作了？因为更新很少发生？此时，时间选择器没有反映变量。您应该如何处理选项？如果您只需要在模板中显示它们，这就足够了。我需要将它们用作指令中的变量来控制时间范围。您在scope.timeOptions
，我不知道还有什么要说的，你有什么具体的问题吗？这是一个非常混乱的用例，许多高级用户直觉上会犯这个错误，当你传递一个变量名时，它不需要计算。像
{min:[0,0]，max:[23,30]}这样的对象表达式
确实需要评估。这就是为什么OP成功地使用了“硬编码值”--表示法，但由于尝试
$eval
变量名而失败。
元素.pickatime（scope.options（））
我认为scope.options应该是一个对象而不是一个函数。@Scottux，实际上是no.&bindings创建了一个函数，调用该函数时，返回通过计算表达式返回的值（html属性的字符串值）针对父作用域。@Kode，这可能是因为输入是在从服务器检索时间范围信息之前创建的。您可以通过添加ng if进行验证。我已将其添加到编辑的答案中。您也可以在指令中使用$watch来执行此操作，但ng if完成了相同的任务。@Kode，我认为此实现初始化需要一个函数：
$scope.timeRange=function（）{return{min:startTime，max:endTime}；
而传递将是
pick-a-time=“timeRange（）”
…我没有注意到我们过度编写了引用。您需要一个发送“当前值”的函数每次$digest循环运行时，当在dom元素上指定控制器时，它都会将控制器实例作为属性“vm”添加到作用域中。
element.pickatime(scope.timeOptions);

<input type="text" placeholder="Start Time" id="timestart" pick-a-time time-options="timeRange" data-ng-model="itemtimestart" class="form-control" autocomplete="off">

appDirectives.directive('pickATime', function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            element.pickatime(scope.options());
        },
        scope: {
            options: '&pickATime'
        },
        templateUrl: '../Templates/timeoptions.html'
    };
});

.controller('xxx', function($scope){
    $scope.parameters = {
    }
}

<input ng-if="timeRange" type="text" placeholder="Start Time" id="timestart" pick-a-time="timeRange" data-ng-model="parameters.itemtimestart" class="form-control" autocomplete="off">

$scope.paramters.itemtimestart should now be the correct time.