DOM이 바운드 $ scope 객체로 업데이트되지 않습니다.

Question

오버레이를 사용하려고하는 AngularJS 앱이 있습니다. 기본적으로 두 개의 패널이 있으며 사용자가 패널을 클릭하면 클릭 된 패널에 $scope.selectedPanel을 설정하고 오버레이를 표시해야합니다. 대신 데이터 바운드 $scope.selectedPanel을 통해 오버레이를 업데이트하지 않고 오버레이를 표시합니다. 개체를 업데이트하지만이 변경 내용은 사용자에게 표시되는 내용에 반영되지 않습니다.

$scope.panels = []; 

$scope.selectedPanel = ""; 

$scope.panels.push(
    {panelID:1, 
    title:"Panel #1", 
    room:"", 
    startTime: "Friday 2:30 PM", 
    endTime: "Friday 3:30 PM", 
    hostedBy: "The Host", 
    description:"This is a description of the panel"} 
); 

$scope.panels.push(
    {panelID:2, 
    title:"Panel #2", 
    room:"", 
    startTime: "Friday 3:30 PM", 
    endTime: "Friday 3:30 PM", 
    hostedBy: "The Host", 
    description:"This is a description of the panel"} 
); 

$scope.pickEvent = function(panel){ 
    setTimeout(function() {  
     $scope.selectedPanel = panel; 
     document.getElementById('overlay').style.display = 'block'; 
    }, 1000); 
} 

오버레이 HTML

<div id="overlay"> 
    <div id="overlayContainer"> 
     <div class="card">       
      <p>{{selectedPanel.title}}</p>    
     </div> 
    </div> 
</div> 

01 selectedPanel & 초기 변수를 설정하는 HTML

<div ng-click="pickPanel(panel);" ng-repeat="panel in panels track by $index"> 
    <p>{{panel.title}}</p> 
</div> 

자바 스크립트 호출

그런데 처음으로 패널 중 하나를 클릭하면 pickEvent 메서드로 이동하고 선택한 이벤트를 설정 한 다음 오버레이를 표시합니다. 그러나 오버레이는 본질적으로 1 단계 뒤입니다. 따라서 첫 번째 패널을 처음 클릭하면 오버레이에 null 제목이 표시됩니다. 그러나 닫고 두 번째 패널을 클릭하면 내가 선택한 첫 번째 패널의 제목이 표시됩니다. 그런 다음 세 번째 패널을 선택하면 내가 선택한 두 번째 패널이 표시됩니다.

AngularJS에 누락 된 것이 있습니까? 특히 $scope.selectedPanel을 전달 된 패널에 설정하면 오버레이 HTML을 강제로 새로 고칩니다.

Answer 1

모델을 모르게 모르게 수정하고 있습니다. onclick을 ng-click으로 변경하고 setTimeout을 $resource으로 변경하여 각도 처리가 바인딩되도록하십시오.

당신이 지금 $scope.$apply()를 호출하여 변경 뭔가를 각도 있도록이 외부 소스 (onclick, intervals 등)에서 모델을 업데이트하거나 대신 ng-click 및 $timeout를 사용하는 경우.