在表中显示多个角引导数据报警器组件

Question

我有张桌子：

<table class="table " id="Table" width="100%">
    <thead>
      <tr>
        <th>ID</th>
        <th>From</th>
        <th>To</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="id in inputID">
        <td class="col-md-1"> {{ id }} </td>
        <td class="col-md-5">
          <div class="form-group">
            <div class="col-sm-10">
              <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker4.date" is-open="ctrl.picker4.open" datepicker-options="ctrl.picker4.datepickerOptions" save-as="json"/>
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker4')"><i class="fa fa-calendar"></i></button>
              </span>
              </p>
            </div>
          </div>

        </td>
        <td class="col-md-5">
          <div class="form-group">
            <div class="col-sm-10">
              <p class="input-group">
                <input type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="ctrl.picker5.date" is-open="ctrl.picker5.open" datepicker-options="ctrl.picker5.datepickerOptions" initialPicker='time' save-as="json" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'picker5')"><i class="fa fa-calendar"></i></button>
              </span>
              </p>
            </div>
          </div>
        </td>
        <td class="col-md-1">
          <p class="form-control-static">{{ ctrl.timeRange }} (minutes)</p>
        </td>
      </tr>
    </tbody>
  </table>

我在其中一个表格单元格中使用来自角度UI引导的数据报警器。当我单击一行中的Calendar图标并选择一天时，所有行都将被替换为一个字符串值，该字符串值表示datepicker的值。

http://plnkr.co/edit/59KKPq?p=preview

Answer 1

可以将日期选择器移动到带有隔离作用域的指令中。这将使它成为不受其他组件影响的组件。

下面是一个基于示例的工作柱塞：http://plnkr.co/edit/K0eVeR?p=preview

注意，在柱塞中，左边的柱塞使用组件并独立工作。右边的人使用旧的方式，因此互相干涉。

我添加的主要代码在JS中：

app.directive('myDatePicker', function() {
return {
    template: '<p class="input-group">'+
    '<input ng-init="isOpen=false" type="text" class="form-control" datetime-picker="dd/MM/yyyy HH:mm" ng-model="date" is-open="isOpen" datepicker-options="datepickerOptions" save-as="json"/>' +
  '<span class="input-group-btn">' +
  '<button type="button" class="btn btn-default" ng-click="isOpen=!isOpen"><i class="fa fa-calendar"></i></button>' +
  '</span></p>',
    restrict: 'E',
    scope: {
      date: "=",
      datepickerOptions: "="
    }
  };
});