Angular - 通过参数在模板中设置占位符答案

【问题标题】：Angular - set placeholder in template by parameterAngular - 通过参数在模板中设置占位符
【发布时间】：2015-04-09 10:14:39
【问题描述】：

我正在使用 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}}”。

使用 compile 函数而不是静态模板会更容易做我正在尝试的事情，但由于指令已经编写并且不想搞砸我想在模板 html 中尝试它。

提前致谢

【问题讨论】：

代替这个 {{myPlaceholder}} 使用 {{datepickerOptions.placeholder}} 看看它是否有效

标签： angularjs templates directive

【解决方案1】：

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

placeholder="{{ngOptions.placeholder}}"

这是一个工作演示：http://plnkr.co/edit/WB80J7dHFq2ammmQybMu?p=preview

【讨论】：