为 Bootstrap-UI 的 uib-datepicker-popup 创建包装指令

Question

我正在尝试为 Bootstrap-UI 的 uib-datepicker-popup 创建一个包装器 AngularJS 指令，这样我就不必重新创建一堆每次我需要 select 约会时的样板。是为 Angular 的早期版本编写的，并且运行遇到了一些奇怪的事情才能使它正常工作。

我已经将指令设置为显示弹出窗口，但是双向数据绑定似乎已损坏；字段模型中的日期值不会传播到指令中，当您单击弹出窗口和 select 日期时，它不会传播回来。有人知道这里发生了什么吗？

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-model，但您在指令模板中寻找模型。

<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

一般来说，我尽量避免在自定义指令上使用 "model" 和 "ng-model" 之类的名称，因为内置 angular 属性应该与自定义属性区分开来。

为 Bootstrap-UI 的 uib-datepicker-popup 创建包装指令

Creating a wrapper directive for Bootstrap-UI's uib-datepicker-popup

datepicker

twitter-bootstrap

angularjs

angular-ui-bootstrap