爲Bootstrap-UI的uib-datepicker-popup創建包裝指令

Question

我正在嘗試爲Bootstrap-UI的uib-datepicker-popup創建一個包裝AngularJS指令，所以我不必每次都重新創建一堆樣板需要選擇一個日期。 I've been working off an example I found here這是爲早期版本的Angular編寫的，並且遇到了一些可能會導致這種情況的怪事。

我已經得到了指令，它顯示一個彈出窗口，但雙向數據綁定似乎被破壞;該字段模型中的日期值不會傳播到指令中，並且當您單擊彈出窗口並選擇一個日期時，它不會傳播回去。有沒有人對這裏發生的事情有任何想法？

I've created a Plunker demonstrating the issue here.

指令代碼：

app.directive('myDatepicker', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      model: "=", 
      myid: "@" 
     }, 
     templateUrl: 'datepicker.html', 
     require: 'ngModel', 
     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; 
      }; 

     } 
    }; 
}); 

模板代碼：

<div class="row"> 
    <div class="col-md-6"> 
     <p class="input-group"> 
      <input type="text" class="form-control" id="{{myid}}" uib-datepicker-popup ng-model="model" is-open="opened" ng-required="true" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p> 
    </div> 
</div> 

Answer 1

您使用的指令代碼NG-模式，但你正在尋找的模型指令模板。

<my-datepicker ng-model="selected" myid="someid"></my-datepicker> 

在這裏你正在尋找一個屬性，叫做模式：

app.directive('myDatepicker', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      //this line should be ngModel 
      model: "=", 
      myid: "@" 
     }, 

這裏有一個工作plunker：https://plnkr.co/edit/s5CT4xGqXtUxgCH8vw8q?p=preview

在一般情況下，我儘量避免使用類似「模式」和「名ng-model「，因爲內置的角度屬性應該與自定義屬性區分開來。