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

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

在这里，您正在寻找一个名为model的属性：

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

这是一个工作的掠夺者：https://plnkr.co/edit/s5CT4xGqXtUxgCH8vw8q?p=preview

一般来说，我尽量避免使用＆＃34; model＆＃34;等名称。和＆＃34; ng-model＆＃34;在自定义指令上，因为内置角度属性应与自定义属性区分开来。

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

1 个答案: