ng-include angular-ui datepicker的改变行为

Question

我在我的一些页面上使用了ng-include,但是我不得不停止使用ng-include,因为它打破了angular-ui datepicker.我打开了这个Github错误.

我想知道是否有其他人在使用作为ng-include的一部分时,指令不能以相同的方式运行.

是否有办法使日期选择器作为ng-include的一部分按预期工作？

这是一个展示它是如何破碎的掠夺者.http://plnkr.co/edit/AboEJGxAK3Uz76CfpaZ0?p=preview

这是在视图上工作的html,但在部分ng包含时不起作用.

<div class="row">
  <div class="col-md-2">
    <p class="input-group">
      <input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="something.dt2" is-open="secondCal"
         min-date="minDate" name="secondCal" max-date="'2015-06-22'" datepicker-options="dateOptions"
         date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" style="line-height: 1.2em" ng-click="open($event, 'secondCal')">
            <i class="ss-icon ss-calendar"></i>
          </button>
        </span>
    </p>
  </div>
</div>

这是来自控制器的JS.

$scope.open = function ($event, elementOpened) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope[elementOpened] = !$scope[elementOpened];
  };

我正在做两种方式 - 包括

<div ng-include src="'dist/partials/myPartial.html'"></div>
<div ng-include="'dist/partials/myPartial.html'"></div>

更新 我发现这是因为ng-include指令为每个include创建了一个新的作用域. 这个SO帖子创建了一个新的指令,它可以在不创建新范围的情况下完成包含.然而,似乎"应该"是一种方法来修复它而不使用不同的包含.

Answer 1

一旦is-opendatepicker指令本身更改了日期选择器就无法打开(例如,单击外部以关闭日期选择器).

这是关于范围的"原型继承"特征的常见问题.

有关完整的详细信息,您可以阅读:Understanding-Scopes

你可以通过不直接存储任何原始值$scope,但是一些对象并使用点符号来解决这个问题:

<input type="text" class="form-control"
    datepicker-popup="yyyy/MM/dd" ng-model="something.dt2"
    is-open="model.secondCal"

并在您的控制器中:

app.controller('MainCtrl', function($scope) {
  $scope.model = {};

  $scope.open = function($event, elementOpened) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.model[elementOpened] = !$scope.model[elementOpened];
  };
});

示例Plunker: http ://plnkr.co/edit/dJNIwSz2Uot3McmIMhd4？p = preview