在 Angular UI 模板中使用自定义数据源

Question

我正在使用 ui-bootstrap-tpls 在我的角度视图中呈现 datepicker。我以这种方式自定义了模板：

customDatePicker.html

<script id="template/datepicker/day.html" type="text/ng-template">
<table role="grid" aria-labelledby="{{uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
    <tr>
        <th>
            <button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1">
                <i class="glyphicon glyphicon-chevron-left"></i>
            </button>
        </th>
        <th colspan="{{5 + showWeeks}}">
            <button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;">
                <strong>{{title}}</strong>
            </button>
        </th>
        <th>
            <button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1">
                <i class="glyphicon glyphicon-chevron-right"></i>
            </button>
        </th>
    </tr>
    <tr>
        <th ng-show="showWeeks" class="text-center"></th>
        <th ng-repeat="label in labels track by $index" class="text-center">
            <small aria-label="{{label.full}}">{{label.abbr}}</small>
        </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in rows track by $index">
        <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
            <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-click="select(dt.date); openCustomDialog(dt.date)" ng-disabled="dt.disabled" tabindex="-1">
                <span>{{dt.label}}</span>
            </button>
        </td>
    </tr>
</tbody>
</table>
</script>
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>

一切正常。我面临的问题是我必须在模板中使用自定义数据

<tbody>
    <tr ng-repeat="row in rows track by $index">
        <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
            <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-click="select(dt.date); openCustomDialog(dt.date)" ng-disabled="dt.disabled" tabindex="-1">
                <span>{{dt.label}}</span>
            </button>
        </td>
    </tr>
</tbody>

例如。我必须为某种事件添加类（更改颜色）。

请帮忙。

Answer 1

最好使用插入模板中的指令来解决这个问题。 (Heres an updated plunker) 注意这里插入的highlight-day="dt" 指令。这会将每一天都带入我们的自定义指令中，以确定我们是否需要突出显示这一天。我更喜欢这种突出显示的方法，而不是对第三方 javascript 进行手术。

<button highlight-day="dt" ng-class="{selected: dt.highlighted}" type="button" style="width:100%;" class="btn btn-default btn-sm" ng-click="select(dt.date); openCustomDialog(dt.date)" ng-disabled="dt.disabled" tabindex="-1">
    <span>{{dt.label}}</span>
</button>

一旦我们有了它，我们就可以添加一个如下所示的指令。请注意，所有逻辑都在 link 函数中完成。

app.directive("highlightDay", ["myCustomObj", "monthMapper", function(myCustomObj, monthMapper){
  return {
    restrict: "A",
    //This brings the value of attribute into our current scope as an object, not just a DOM string
    scope: {
      highlightDay: "="
    },
    link: function(scope, element, attrs, ctrls) {
      //Make the native date object as a local variable
      var dt = scope.highlightDay.date;

      //Find out what the month name should be
      var monthName = monthMapper[dt.getMonth()];

      //Loop through all the possible selected dates
      for(var i in myCustomObj){
        var entry = myCustomObj[i];

        //If the month and day match
        var isMatch = entry.month === monthName && entry.day === dt.getDate();

        if(isMatch) {
          scope.highlightDate.highlighted = isMatch
          break;
        }
      }
    }
  };
}]);

您还会注意到另外两个依赖项，myCustomObj 和 monthMapper。这些是在其他地方定义的，可以像我在下面所做的那样。

app.constant("monthMapper", [
  "january",
  "february",
  "march",
  "april",
  "may", 
  "june",
  "july",
  "august",
  "september",
  "november",
  "december"
]);

app.value("myCustomObj", [{ 
      "month" : 'june',
      "day" : 19
    },
    { 
      "month" : 'june',
      "day" : 28
    }
]);

作为旁注，您可以通过重组myCustomObj 来加快确定是否应该选择这一天的时间，可能是这样的。

{
   june: [19, 28]
}

Answer 2

我认为更改模板最好最快的方法是首先复制相同的模板并对其进行调整，因为模板已经绑定了所有事件和必要的类。

您的第二个解决方案是获取 ng-{{event}} 的所有部分（ng-class、ng-click、ng-...）并将它们连接到您的模板的同一位置。

希望对你有意义。