pascalprecht.translate 不适用于 bootstrap-filestyled-file-form-element 的属性

Question

我这里准备了一个plunker，看看问题所在：Angular Translate Example

翻译工作正常，唯一的例外是 bootstrap-filestyled form-file-element 的属性字段。

      <div class="form-group">
        <!-- APP_USER_IMAGE -> WORKS -->
        <label class="control-label col-sm-3" for="image">
              "{{ 'APP_USER_IMAGE' | translate }}"
        </label>
        <div class="col-md-6">
          <!-- APP_FILE_UPLOAD_TXT -> DOES NOT WORK --> 
          <input type="file" filestyle="" 
              id="image" 
              name="image" 
              ng-model="tempData.image" 
              data-button-text="{{ 'APP_FILE_UPLOAD_TXT' | translate }}" 
              data-class-button="btn btn-default" 
              data-classinput="form-control inline" 
              nv-file-select="" 
              class="form-control" />
        </div>
      </div>

我做错了什么？

Answer 1

能够在 filestyle 指令中获得翻译后的值：

function link(scope, element) {
    var options = element.data();
    $translate('APP_FILE_UPLOAD_TXT').then(function (text) {
      options.buttonText = text;
      element.filestyle(options);
    });
}

见updated plunker

Answer 2

通过 2 次修改，您可以将解决方案用于每个文件元素，而无需每次都触及指令：

1) 在视图中

data-button-text="APP_FILE_UPLOAD_TXT"

2) 在指令中

function filestyle($translate) {
    var directive = {
        strict: 'A'
    };
    return directive;

    function link(scope, element) {
        var options = element.data();
        // old usage support
        options.classInput = element.data('classinput') || options.classInput;
        $translate(options.buttonText).then(function(text) {
            options.buttonText = "&nbsp;" + text;
            element.filestyle(options);
        });
    }
}

pascalprecht.translate 不适用于 bootstrap-filestyled-file-form-element 的属性

pascalprecht.translate does not work on an attribute of an bootstrap-filestyled-file-form-element

angularjs

angular-translate