Angularjs e NG-Init Scope quando i dati cambiano

Question

Quindi ho un'applicazione del calendario in questo momento, l'utente sceglie le date di avvio / fine e fai clic su Aggiorna calendario. Questo popola un calendario. Tuttavia, sto avendo problemi a includere nuovi elementi nell'ambito. Ad esempio, invece di utilizzare continuamente la stessa funzione più e più volte per calcolare la "data della cella" per una cella dalla data di inizio, il numero della settimana, il giorno della settimana, ecc., Voglio memorizzare la data della cella una volta nella sua portata e lascia che tutti gli altri lo usino. In qualche modo non riesco a farlo nonostante molti tentativi. Nel Jsfiddle qui sotto, noterai i giorni del mese visualizzato nell'angolo in alto a destra di ogni cella del calendario. Tuttavia, se si modificano le date, per dire un mese precedente, i giorni dell'aggiornamento del mese ma la "data della cella" che ho visualizzato nella cella non si aggiorna!

Ad esempio, prendi "SAT JUL 05 2014". Aggiorna le date per iniziare a 6/1, e la cella estremamente destra è ancora "Sab Jul 05 2014" anche se il suo giorno del mese riflette il 7 giugno! Il codice pertinente è nella direttiva "Calcell" e nella direttiva "Eventi". In Calcell, ho impostato la cella come ng-init= 'celld= celldate (num, start_dt, $ index)'. Quindi negli eventi mostravo semplicemente usando {{celld}}. Potrei farlo funzionare utilizzando Celldate (Num, Start_dt, $ indice) in eventi ma davvero non voglio usare la stessa funzione un milione di volte ovunque. C'è un modo in cui posso memorizzare la data della cella nell'oggetto cellulare e semplicemente usarlo nell'ambito dei bambini e farlo aggiornare quando i dati cambiano? Alla fine passerò la data della cella a una funzione per ottenere dati di eventi per quella data, allora gli eventi iterano su di essi per visualizzare i dati degli eventi.

link di violino

app.directive("events", function($compile, DateService) {
        return {
            restrict: "A",
            replace: true,
            scope: true,
            template: 
                    "<div>{{celld}}</div>",
            link: function(scope, element, attrs) {
                scope.DateService = DateService;
            }
        }
    });

    //calendar cell 
    app.directive("calcell", function($compile, DateService) {
        return {
            restrict: "A", 
            replace: true, 
            scope: true,
            template: 
                "<td ng-init='celld=cellDate(num, start_dt, $index)' id='{{\"td\" + DateService.getDateInt(cellDate(num, start_dt, $index))}}' \
                        realclass='{{getScopeClass(cellDate(num, start_dt, $index))}}'>\
                    <div>\
                        <a class='CellDay'>{{DateService.getMonthDay(cellDate(num, start_dt, $index))}}</a>\
                    </div>\
                    <br/>\
                    <br/>\
                    <br/>\
                    <br/>\
                    <div events></div>\
                    </div>\
                </td>",
            link: function(scope, element, attrs) {                 
                scope.DateService = DateService;
            }
        }
    }); 

.

Grazie!

Answer 1

Sono stato in grado di farlo funzionare mettendo il celld sul tag dell'evento.Non sono sicuro se questo aiuta.

<div events ng-attr-celld='{{cellDate(num, start_dt, $index)}}'></div>

.

Non è necessario sostituirlo e il contrario è il valore dell'ambito.

//replace: true,
...
scope: {celld:'@'}

.

Fiddle

E se non hai già visto - calendario UI angolare - potrebbe salvareun po 'di tempo.