gpt4 book ai didi

javascript - AngularJS - 如何刷新指令范围

转载 作者:行者123 更新时间:2023-11-29 23:57:01 27 4
gpt4 key购买 nike

我创建了一个简单的日期选择器指令,它有一个“选项”。

所以我用一组选项启动日期选择器,然后由于业务逻辑我更改了这些选项,但这些选项没有被刷新。

在此示例中,我需要将“endDate”的日期选择器开始日期更新为与“startDate”相同的日期。

这是我的代码:

指令:

function datepicker() {
return {
restrict: "A",
scope: {
options : '='
},
link: function(scope, element, attrs) {

var opts = scope.options || {};

element.datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true,
useCurrent: true,
format: opts.format || 'dd/mm/yyyy',
startDate : opts.startDate || ''
});
}
};
}

Controller :

$scope.evaluation = {};

$scope.startDatepickerOptions = {
startDate : new Date()
};

$scope.endDatepickerOptions = {
startDate : new Date()
};

$scope.$watch('evaluation.startDate', function(newValue) {
$scope.endDatepickerOptions.startDate = newValue;
});

查看:

<input type="text" ng-model="evaluation.startDate" name="startDate" datepicker options="startDatepickerOptions"/>

<input type="text" ng-model="evaluation.endDate" name="endDate" datepicker options="endDatepickerOptions"/>

最佳答案

解决方法如下:

我需要在指令链接函数上添加一个相等观察器。到目前为止,由于日期/字符串问题,我已经实现了 moment.js library

这是最终代码:

指令(链接函数):

link: function(scope, element, attrs) {

var opts = scope.options || {};

element.datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true,
useCurrent: true,
format: opts.format || 'dd/mm/yyyy',
startDate : opts.startDate || ''
});

scope.$watch('options.startDate', function(newValue) {
if(newValue) {
element.datepicker('setStartDate', newValue);
element.datepicker('setDate', "");
}
});
}

Controller :

$scope.startDatepickerOptions = {
startDate : moment().toDate()
};

$scope.endDatepickerOptions = {
startDate : moment().toDate()
};

$scope.$watch('evaluation.startDate', function(newValue) {
if(newValue)
$scope.endDatepickerOptions['startDate'] = moment(newValue, "DD-MM-YYYY").toDate();
});

关于javascript - AngularJS - 如何刷新指令范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41348442/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com