Question

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

我想知道是否有其他人在使用ng-include的一部分时，指令的功能不同。

有没有办法让datepicker像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创建了一个新的作用域。 This SO post创建一个新指令来执行包含而不创建新范围。然而，似乎“应该”是一种方法来修复它而不使用不同的包含。

Answer 1

datepicker指令本身更改is-open后，datepicker将无法打开（例如，单击“外部”以关闭日期选择器）。

这是关于＆＃34; Prototypal Inheritance＆＃34; 范围特征的常见问题。

有关详细信息，请参阅：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

Answer 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

不记得哪个角色团队说过它，但是如果你的模型中没有一个点，那你就错了。

解释其原因的一点解释：

如果你这样做

$scope.valueName = value

它会立即为当前范围赋值

但如果你这样做

$scope.something.valueName = value

会发生什么情况，angular会首先找到$ scope.something，如果它在当前范围内不存在，它将在父级中查找（只要你不在隔离范围内工作）然后当它找到它时，它会分配值或返回类似'无法找到valueName of undefined'

的内容来自angularjs文档的

： https://docs.angularjs.org/api/ng/directive/ngInclude

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

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

2 个答案: