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>

.

ex.어떤 종류의 이벤트에 대해 수업을 추가해야합니다. >
제발 도와주세요.

Answer 1

이것은 템플릿에 삽입 된 지시문을 사용하여 가장 잘 해결됩니다.( 업데이트 된 plunker " heres 여기에 삽입 된 highlight-day="dt" 지시문을 알아보십시오.이렇게하면 매일 우리가 하루를 강조 해야하는지 확인하기 위해 매일 맞춤 지시문에 가져올 것입니다.제 3 자 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

I think that the best and fastest way to change the template is first copy the same template and make the adjustments on him as the template already has all the events and necessary classes binded.

The second solution for you is to take all the parts of ng-{{event}} (ng-class, ng-click, ng-...) and to connect them to your template in the same place.

Hope it make sense to you.