ui.bootstrap.datepicker Yönetmelik Tarih Alanı görüntülemek için kullanıyorum. Ancak aynı kurulum gerekiyor çoğu zaman: o bir pop-up ve pop-up düğme ile birlikte ve aynı zamanda metinleri için Almanca isimlerini istiyorum. gelmek istiyorum Kendimi tekrarlamaktan kendimi engellemeye kendi talimatımı yazdım düğmesi için aynı Kodu ve metin ve biçimlendirmeyi tekrar tekrar oluşturun.

Benim Direktifi ile Here is a plunkr. Ancak yanlış yapıyorum. Eğer tarih seçici kullanarak bir tarih seçmeniz durumunda, "1 talimatımı kullanmayan" datepicker her şey gayet iyi çalışıyor.Tarih Ben pek bir şey kalmamış aynı Tarih 2, ama yerine görüntüleme tarihine göre şablon sağlanan giriş alanı (veya başka bir değer bekliyordum) görüntüler .toString() Gösterim Tarihi nesne (örneğin Fri Apr 03 2015 00:00:00 GMT 0200 (CEST)).

İşte benim yönergesi:

angular.module('ui.bootstrap.demo').directive('myDatepicker', function($compile) {
  var controllerName = 'dateEditCtrl';
  return {
      restrict: 'A',
      require: '?ngModel',
      scope: true,
      link: function(scope, element) {
          var wrapper = angular.element(
              '<div class="input-group">'  
                '<span class="input-group-btn">'  
                  '<button type="button" class="btn btn-default" ng-click="'   controllerName   '.openPopup($event)"><i class="glyphicon glyphicon-calendar"></i></button>'  
                '</span>'  
              '</div>');

          function setAttributeIfNotExists(name, value) {
              var oldValue = element.attr(name);
              if (!angular.isDefined(oldValue) || oldValue === false) {
                  element.attr(name, value);
              }
          }
          setAttributeIfNotExists('type', 'text');
          setAttributeIfNotExists('is-open', controllerName   '.popupOpen');
          setAttributeIfNotExists('datepicker-popup', 'dd.MM.yyyy');
          setAttributeIfNotExists('close-text', 'Schließen');
          setAttributeIfNotExists('clear-text', 'Löschen');
          setAttributeIfNotExists('current-text', 'Heute');
          element.addClass('form-control');
          element.removeAttr('my-datepicker');

          element.after(wrapper);
          wrapper.prepend(element);
          $compile(wrapper)(scope);

          scope.$on('$destroy', function () {
              wrapper.after(element);
              wrapper.remove();
          });
      },
      controller: function() {
          this.popupOpen = false;
          this.openPopup = function($event) {
              $event.preventDefault();
              $event.stopPropagation();
              this.popupOpen = true;
          };
      },
      controllerAs: controllerName
  };
});

Ve o bunu kullanmak nasıl:

<input my-datepicker="" type="text" ng-model="container.two" id="myDP" />

(Kavram this answer ilham kaynağı oldu)

Açısal 1.3 (plunker sadece angular-ui-bootstrap datepicker belgelerine plunker çatallı çünkü 1.2) kullanıyorum. Bu herhangi bir fark yapmaz umarım.

Neden benim giriş yanlış metin çıktı ve nasıl doğru yapılır?

Güncelleme

Bu arada küçük bir ilerleme yaptım. this plunkr derleme ve bağlantı ile ilgili ayrıntılar hakkında daha fazla okuduktan sonra, derlemek yerine link benim DOM manipülasyon yapmak için fonksiyon kullanıyorum. Yine de doktorlar bu alıntı: biraz kafam karıştı

Not: şablon örneği ve örnek şablon kopyalandı eğer farklı nesneler olabilir bağlantı. Bu nedenle güvenli bir şey klonlanmış DOM düğümleri içinde derleme işlevi tamamı için geçerli DOM dönüşümleri yapmak için değil. Özellikle, DOM dinleyici kayıt bir derleme işlevini yerine bağlayan bir işlev yapılmalıdır.

Özellikle ile kastedilen acaba "hepsi klonlanmış DOM düğümler için de geçerlidir". Ben aslında bu "o" ama öyle görünmüyor. şablon DOM tüm klonlar için geçerli anlamına gelir sandım

Neyse: derleme yeni sürüm yaptığım işleri krom ince. Firefox ihtiyacım var ilk seçin tarihini kullanarak bir tarih seçici ve sonra her şey gayet iyi çalışıyor (sorun çözüldü Firefox kendisi değiştirirsem tanımlanmamış null (plunkr) tarih çözümleyici tarih seçici). Bu yeni bir şey değil yani. Ve ayrıca derleme sırasında yeniden ng-model yerine ng-model2 kullanıyorum. Eğer bunu yaparsam her şey yine bozuldu. Hala nedenini bilmiyorum.

Dürüst olmak gerekirse, neden niçin ve Tarih neden olan şeyi "olabilirdi-ed" giriş gösteren önce. tam olarak emin değilim

Ancak, yaptığım bulun yerlere yeniden kabul ve kaldırmak çok gereksiz kod gibi $compile servis, özniteliklerini değiştirir, kapsamı, kalıtım, require Yönerge, vb. kullandım izole kapsam beri sanmıyorum her Direktifi kullanımı gerek üst kapsam olarak bu olabilir kısır böcek ileri doğru gidiyor. Bu benim yönergesi değişti

angular.module('ui.bootstrap.demo').directive('myDatepicker', function() {
  return {
      restrict: 'A',
      scope: {
          model: "=",
          format: "@",
          options: "=datepickerOptions",
          myid: "@"
      },
      templateUrl: 'datepicker-template.html',
      link: function(scope, element) {
          scope.popupOpen = false;
          scope.openPopup = function($event) {
              $event.preventDefault();
              $event.stopPropagation();
              scope.popupOpen = true;
          };

          scope.open = function($event) {
            $event.preventDefault();
            $event.stopPropagation();
            scope.opened = true;
          };

      }
  };
});

Ve HTML kullanımı olur:

<div my-datepicker model="container.two" 
                   datepicker-options="dateOptions" 
                   format="{{format}}"  
                   myid="myDP">
</div>

Edit: Direktif için bir parametre olarak id ekledi. Plunker güncellendi.

Plunker