如何在angular-strap datepicker中改变动态语言？

Question

我在我的项目中使用angular-strap datepicker。不幸的是，我没有找到动态改变语言环境的机会。我需要在每个$localeChangeSuccess上重画datepicker，但我不知道怎么做。由于服务$locale，插件定义了区域设置，但它只在init阶段定义了一次。

Answer 1

不幸的是，angular-strap没有注意到$locale的变化。使用特定的$locale初始化angular-strap工作得很好，但是一旦区域设置改变，angular-strap就不会重新渲染他的组件。我可以用一些技巧让它工作，但这个解决方案并不是最好的，因为它依赖于$timeout的和“强制渲染的东西”。请检查这个fiddle。在GitHub创建一个功能请求并在$locale更改时创建角度带重新渲染会更好。

视图

<div ng-controller="Ctrl" class="padded">
    <select name="language" 
            ng-model="language" 
            ng-options="k as v for (k, v) in languages" 
            ng-change="changeLanguage(language)"></select>
    <input type="text" class="form-control" 
            ng-if="!someChange" 
            ng-model="myDate" 
            placeholder="Until" bs-datepicker>
    <div class="padded">Selected date: {{ myDate | date:'shortDate'}}</div>
</div>

AngularJS应用程序

angular.module('calendar', [
  'mgcrea.ngStrap.datepicker',
  'tmh.dynamicLocale'
])
.config(function (tmhDynamicLocaleProvider) {
  tmhDynamicLocaleProvider.localeLocationPattern('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/i18n/angular-locale_{{locale}}.js');
})
.controller('Ctrl', function($scope, tmhDynamicLocale, $timeout) {

  $scope.myDate = new Date();
  $scope.someChange = false;
  $scope.language = 'en-gb';
  $scope.languages = {
    'en-us': 'English (USA)',
    'en-gb': 'English (Great Britain)',
    'de-de': 'Deutsh (Deutsh)'
  };


  $scope.changeLanguage = function (language) {

    //set new language
    tmhDynamicLocale.set(language);

    //store selected date 
    var saveDate = angular.copy($scope.myDate);

    $timeout(function () {
      $scope.someChange = true;
      $timeout(function () {
        $scope.someChange = false;
        $scope.myDate = saveDate;
      }, 150);
    }, 150);
  }
});

Answer 2

我尝试了使用ng-if的解决方案，但它造成了副作用，即ngModel在时间选择器中选择一次后停止更新。

我提出了另一种不需要删除元素的方法：

我没有给模型一个日期，而是给它一个对象，如下所示：

$scope.pickerModel = { date: myDate, language: myLang }

并像这样修改angular-strap代码：

请转至：

行中的controller.$formatters.push(function (modelValue) function...：3774

将"else“中的值从：

date = new Date(modelValue);

至

date = new Date(modelValue.date);
if (modelValue.language) {
   options.language = modelValue.language;
}

就这样!