데이터 변경 시 anglejs 및 ng-init 범위

Question

그래서 지금 사용자가 시작/종료 날짜를 선택하고 달력 업데이트를 클릭하는 달력 응용 프로그램이 있습니다.그러면 달력이 채워집니다.그러나 범위에 새로운 요소를 포함하는 데 문제가 있습니다.예를 들어, 시작 날짜, 주 번호, 요일 등에서 일부 셀의 "셀 날짜"를 계산하기 위해 동일한 함수를 계속해서 사용하는 대신 셀 날짜를 해당 범위에 한 번 저장하고 싶습니다. 그리고 다른 사람들도 그것을 사용하게 해주세요.여러번의 시도에도 불구하고 어떻게든 할 수가 없습니다.아래 JSFiddle에서는 각 달력 셀의 오른쪽 상단에 날짜가 표시되는 것을 볼 수 있습니다.그러나 날짜를 변경하면(예: 한 달 전) 해당 월의 날짜는 업데이트되지만 셀에 표시된 "셀 날짜"는 업데이트되지 않습니다!

예를 들어 '2014년 7월 5일 토요일'을 사용합니다.6월 1일에 시작하도록 날짜를 업데이트하면 해당 날짜가 6월 7일을 반영하더라도 맨 오른쪽 셀은 여전히 ​​"2014년 7월 5일 토요일"입니다.관련 코드는 "calcell" 지시어와 "events" 지시어에 있습니다.calcell에서는 celld를 ng-init='celld=cellDate(num, start_dt, $index)'로 설정했습니다.그런 다음 이벤트에서 {{celld}}를 사용하여 간단히 표시합니다.이벤트에서 cellDate(num, start_dt, $index)를 사용하여 작동하게 할 수 있지만 실제로는 동일한 함수를 모든 곳에서 백만 번 사용하고 싶지 않습니다.셀 개체에 셀 날짜를 저장하고 하위 범위에서 사용하고 데이터가 변경될 때 업데이트되도록 할 수 있는 방법이 있습니까?결국 셀 날짜를 함수에 전달하여 해당 날짜의 이벤트 데이터를 가져온 다음 이벤트가 해당 날짜를 반복하여 이벤트 데이터를 표시합니다.

바이올린 링크

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

감사해요!

Answer 1

이벤트 태그에 셀드를 넣어서 작동하게 만들었습니다.그것이 도움이 되는지 확실하지 않습니다.

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

교체할 필요가 없으며 attr은 범위 값입니다.

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

깡깡이

그리고 아직 보지 않으셨다면 - 각도 UI 달력 - 시간을 좀 절약할 수 있을 것 같아요.