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

【问题标题】：ng-include changing behavior of angular-ui datepickerng-include 改变 angular-ui datepicker 的行为
【发布时间】：2014-10-08 01:50:45
【问题描述】：

我在一些页面上使用了 ng-include，但是我不得不停止使用 ng-include，因为它破坏了 angular-ui 日期选择器。我打开了这个Github bug。

我想知道是否有其他人在将指令用作 ng-include 的一部分时遇到了与指令不同的问题。

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

这是一个显示它是如何损坏的 plunker。 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];
  };

还有我做 ng-include 的两种方式

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

更新我发现这是因为 ng-include 指令为每个包含创建了一个新范围。 This SO post 创建一个新指令，该指令在不创建新范围的情况下执行包含。但是，似乎“应该”有一种方法可以在不使用其他包含的情况下修复它。

【问题讨论】：

标签： javascript angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

一旦 is-open 被 datepicker 指令本身更改（例如单击外部以关闭 datepicker），datepicker 将无法打开。

这是关于范围的“原型继承”特征的常见问题。

有关完整的详细信息，您可以阅读以下内容：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

【讨论】：

谢谢你！我确实将$scope.model[elementOpened] = !$scope.model[elementOpened]; 更改为$scope.model[elementOpened] = true;，但一切都按预期工作。赞一个。

【解决方案2】：

我已经创建了 Plunker 来调试它，但它可以很好地与您的代码配合使用

http://plnkr.co/edit/nxYCiwRqdWMOkfZoRhGY?p=preview

<body ng-controller="MainCtrl">
  <div ng-include="'partial.html'"></div>
</body>

经过澄清和进一步测试后，我发现带有 ng-include 的日历在触发更改时失去了范围，而不是通过范围方法，简单的解决方法是按照这个 plunker

http://plnkr.co/edit/nxYCiwRqdWMOkfZoRhGY?p=preview

不记得是哪个 Angular 团队说的，但如果你的模型中没有点，那你就做错了。

解释一下它为什么起作用：

如果你这样做了

$scope.valueName = value

它会立即为当前作用域赋值

如果你这样做了

$scope.something.valueName = value

将会发生的事情是 Angular 将首先定位 $scope.something，如果它在当前范围内不存在，它将在父级中查找（只要您不在隔离范围内工作）然后当它找到它时，它将分配值或返回类似'找不到未定义的值名'

来自 angularjs 文档： https://docs.angularjs.org/api/ng/directive/ngInclude

此指令创建新范围。该指令以优先级 400 执行。

【讨论】：

日期选择器打开一次，关闭后就不会再打开了。
已更新，让点击plnkr.co/edit/nxYCiwRqdWMOkfZoRhGY?p=preview变得更容易
我一遍又一遍地点击它，它按预期关闭和打开
@maurycy 打开日期选择器后，单击Click 按钮旁边的任意位置。
根据这个post，说的是米什科。