Question

我使用bootstrap-datepicker指令，我试图在指令创建的输入中设置占位符：

该指令替换了使用静态模板调用它的html代码。这是指令：

dp.directive('ngDatepicker', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      ngOptions: '=',
      ngModel: '='
    },    
    template: '<div class="input-append date">\n  <input type="text" placeholder="{{myPlaceholder}}" ><span class="add-on"><i class="icon-calendar">    </i></span>\n</div>',
    link: function(scope, element) {
      scope.inputHasFocus = false;
      element.datepicker(scope.ngOptions).on('changeDate', function(e) {
        var defaultFormat, defaultLanguage, format, language;
        defaultFormat = $.fn.datepicker.defaults.format;
        format = scope.ngOptions.format || defaultFormat;
        defaultLanguage = $.fn.datepicker.defaults.language;
        language = scope.ngOptions.language || defaultLanguage;
        return scope.$apply(function() {
          return scope.ngModel = $.fn.datepicker.DPGlobal.formatDate(e.date, format, language);
        });
      });
      element.find('input').on('focus', function() {
        return scope.inputHasFocus = true;
      }).on('blur', function() {
        return scope.inputHasFocus = false;
      });
      return scope.$watch('ngModel', function(newValue) {
        if (!scope.inputHasFocus) {
          return element.datepicker('update', newValue);
        }
      });
    }
  };
});

我想要实现的是在它创建的模板的占位符中设置自定义文本，我使用发送到指令的选项将该文本传递给指令：

$scope.datepickerOptions = {format: 'dd/mm/yyyy', language: 'es', autoclose: true, weekStart: 1, placeholder: 'Birthdate'};

上面代码的输出会产生一个输入，其占位符显示“{{myPlaceholder}}”。

使用编译函数而不是静态模板将更容易做我正在尝试的，但由于该指令已经编写并且不想弄乱它我想在模板html中尝试。

提前致谢

Answer 1

myPlaceholder未定义。您将占位符作为ngOptions对象的属性传递给指令。请改用：

placeholder="{{ngOptions.placeholder}}"

这是一个有效的演示：http://plnkr.co/edit/WB80J7dHFq2ammmQybMu?p=preview

Angular - 按参数设置模板中的占位符

1 个答案: