Angularjs et NG-Init Scope lorsque les données changent

Question

J'ai donc une application de calendrier où l'utilisateur choisit dès maintenant les dates de démarrage / fin et clique sur le calendrier de mise à jour. Cela remplit un calendrier. Cependant, j'ai du mal à inclure de nouveaux éléments dans la portée. Par exemple, au lieu d'utiliser continuellement la même fonction encore et encore pour calculer la "date de la cellule" pour certaines cellules à partir de la date de début, numéro de semaine, jour de la semaine, etc., je veux stocker la date de la cellule une fois dans sa portée et laissez tout le monde l'utiliser. D'une manière ou d'une autre, je suis incapable de le faire malgré de nombreuses tentatives. Dans le jsfiddle ci-dessous, vous remarquerez des jours de l'écran du mois dans le coin supérieur droit de chaque cellule de calendrier. Toutefois, si vous modifiez les dates, pour dire un mois précédent, les jours de la mise à jour du mois, mais la "date de la cellule" que j'ai affichée dans la cellule ne se met pas à jour!

Par exemple, prenez "SAT 05 2014". Mettez à jour les dates pour commencer à 6/1, et la cellule extrême droite est toujours "SAT 05 2014", même si sa journée du mois reflète le 7 juin! Le code pertinent est dans la directive «Calcell» et la directive «Événements». Dans Calcell, j'ai défini la Celld comme ng-init= 'Celld= Celldate (Num, Start_DT, $ Index)'. Ensuite, dans les événements, j'affiche simplement en utilisant {{celld}}. Je pourrais le faire fonctionner en utilisant CellDate (Num, Start_DT, $ Index) dans des événements, mais je ne veux vraiment pas utiliser la même fonction un million de fois partout. Y a-t-il une façon de stocker la date de la cellule dans l'objet de la cellule et de l'utiliser dans la portée des enfants et de la mettre à jour lorsque les données changent? Finalement, je passerai la date de dépassement de la cellule à une fonction pour obtenir des données d'événements à cette date, les événements vont-ils itération sur eux pour afficher les données d'événements.

lien de violon

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

merci!

Answer 1

J'ai pu le faire fonctionner en mettant la cellule sur la balise d'événement.Pas sûr si cela aide.

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

Pas besoin de le remplacer et que l'attr concerne la valeur de portée.

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

Fiddle

Et si vous n'avez pas déjà vu - Calendrier d'interface utilisateur angulaire - pourrait sauvegardervous quelque temps.