Question

我们正在使用bootstrap datepicker来满足我们的项目需求。我们需要做的是，每当用户选择今天的日期时，日期必须在文本框中显示为“（TODAY）”，如“2008年5月12日（今天）”。

这里最好的方法是什么？由于我们在多个地方使用这个datepicker，我认为像创建指令这样的一般方法会有所帮助。尝试使用datepickerPopup指令绑定change事件，但无法使其正常工作。

这是我到目前为止所尝试的内容：

创建了一个装饰器。这似乎有效。但是有一个问题，如何在这个装饰器中访问父指令方法（例如dateFilter，parseDate here）？（对不起，如果你发现我的问题天真，因为我对angularjs很新）。我附上了代码。

app.config(function($provide) {
$provide.decorator('datepickerPopupDirective', function($delegate) {
    var directive = $delegate[0],
        link = directive.link;
     //closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection,
    //angular.extend(directive.scope, { 'monthChanged': '&' });

    directive.compile = function() {
        return function(scope, element, attrs, ngModel) {
            link.apply(this, arguments);

                ngModel.$render = function() {
                    var date = ngModel.$viewValue ? dateFilter.apply(ngModel.$viewValue, dateFormat) : '';
                    var currentDate = new Date();
                    currentDate.setHours(0,0,0,0);

                    if(date.getTime() == currentDate.getTime()){
                        element.val(date + "(TODAY)");
                    }else{
                        ngModel.$setViewValue(scope.date);
                    }                               
                    scope.date = parseDate( ngModel.$modelValue );
                  };
        };
    };
    return $delegate;
});

}）;

Answer 1

你有几个选择。快速而肮脏的方法是将组件从第三方库中提取到您自己的指令和模板中，并根据需要进行修改。这样做的缺点是您将无法再使用该组件。未来版本将要求您手动更新您的指令，您可能不关心......但是。

第二个选项是take advantage of angular's $provide.decorator

这篇文章给出了初步想法

What are "decorators" and how are they used?

这是装饰指令定义对象

的基本示例

app.directive("foo", function() {
  return {
    replace: true,
    template: '<div>This is foo directive</div>'
  };
});

app.config(function($provide) {
  $provide.decorator('fooDirective', function($delegate) {
    var directive = $delegate[0];

    directive.restrict = "AM";
    return $delegate;
  });
});

在您的情况下，您将要覆盖模板上引用的值。如果要完全修改它，可以修饰整个指令。

我建议将此作为解决第三方库修改的最佳方法。

这是一个装饰指令以覆盖范围级别函数的示例，并在覆盖它时使用指令中的现有范围变量。

https://jsfiddle.net/wvty8rpc/3/

自定义bootstrap angularjs datepicker

1 个答案: