데이터 변경 시 anglejs 및 ng-init 범위
-
26-12-2019 - |
문제
그래서 지금 사용자가 시작/종료 날짜를 선택하고 달력 업데이트를 클릭하는 달력 응용 프로그램이 있습니다.그러면 달력이 채워집니다.그러나 범위에 새로운 요소를 포함하는 데 문제가 있습니다.예를 들어, 시작 날짜, 주 번호, 요일 등에서 일부 셀의 "셀 날짜"를 계산하기 위해 동일한 함수를 계속해서 사용하는 대신 셀 날짜를 해당 범위에 한 번 저장하고 싶습니다. 그리고 다른 사람들도 그것을 사용하게 해주세요.여러번의 시도에도 불구하고 어떻게든 할 수가 없습니다.아래 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;
}
}
});
감사해요!