Utilizzare la fonte dati personalizzata in modello UI angolare

Question

Sto usando UI-bootstrap-TPLS per rendere il datepicker nella mia vista angolare.Ho personalizzato il modello in questo modo:

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>

.

funziona bene.Il problema che sto affrontando è che devo usare i dati personalizzati nel modello in

<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>

.

per ex.Devo aggiungere classe (per cambiare colore) per qualche tipo di evento.

Per favore aiuto.

Answer 1

Questo è meglio risolto utilizzando una direttiva inserita nel modello.( heres un pinkeer aggiornato ) Si noti la direttiva highlight-day="dt" inserita qui.Ciò porterà ogni giorno nella nostra direttiva personalizzata per determinare se abbiamo bisogno di evidenziare il giorno.Preferisco questo metodo di evidenziazione rispetto all'esecuzione di un intervento chirurgico su JavaScript di terze parti.

<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>

.

Una volta che abbiamo, possiamo aggiungere una direttiva che sembra segue.Notare che tutta la logica viene eseguita nella funzione 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;
        }
      }
    }
  };
}]);

.

Noti anche le altre due dipendenze, myCustomObj e monthMapper.Questi sono definiti altrove angolari e potrebbero essere come ho fatto di seguito.

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
    }
]);

.

Come nota laterale, è possibile accelerare il tempo determinazione se il giorno deve essere selezionato riorganizzando myCustomObj forse qualcosa del genere.

{
   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.