각도 1 지시문 구성 요소가 모달에서 다른 동작을합니다.

Question

저는 사용자 지정 지시문 구성 요소의 문제로 정말 고심하고 있습니다. Angular ivh-treeview angular-ivh-treeview을 기반으로 TreeView 드롭 다운 구성 요소를 만들었습니다. Becasue ivh-treeview는 기본적으로 권장 기능이 없으며 스타일을 확장했습니다. 그러나 지금 나는 전에 보지 못했던 문제에 직면하고 있으며, 나는 당신의 도움에 정말로 감사 할 것입니다. 이 구성 요소는 모달에서 절대적으로 작동합니다. 확인란을 클릭하면 반응이 빨라지고 모든 것이 멋지게 보입니다. 그러나 다른 페이지 (모달이 아닌)에서 같은 구성 요소를 사용하면 정말 이상한 행동을합니다. 확인란을 선택하면 즉시 업데이트되지 않으며 페이지의 다른 곳을 클릭하거나 드롭 다운을 닫아 변경 사항을 확인해야합니다. 나는 거기에서 무슨 일이 일어나고 있는지, 그리고 동일한 구성 요소가 모달에서 작동하는지에 대한 단서가 없습니다. 아마 그것은 modalInstance가 다른 범위를 가지기 때문입니다.하지만 끝났습니다. 여기

당신이보고 예 (페이지 1 - 모달, 2 페이지 - 모달)로 재생할 수 있습니다 : DEMO

이 내가 여기 DEMO를 링크 할 수 있도록 포함했다 코드의 단지 조각이다 Plunkr에

<ivh-dropdown ivh-model="treeStructureFinal" selected-array="formData.casinos" is-disabled="inReadMode" placeholder="Select casinos"></ivh-dropdown> 

모두에게 감사드립니다!

Answer 1

이런 종류의 일이 생길 때 나는 항상 $scope.$apply()에 대해 생각합니다.

그래서 나는 사소한 수정을했고, 지금 지시어는 클릭 처리기의 끝에 scope.$apply를 추가하여, 잘 작동 :

 $document.bind('click', function (event) { 
      var isClickedElementChildOfPopup = element.find(
        event.target).length > 0; 
      if (!isClickedElementChildOfPopup 
       && element[0].children[1].classList.contains("show")) { 
       element[0].children[1].classList.toggle("show"); 
      } 
      scope.$apply(); 
     }); 

작업이 한 번 봐를 : https://plnkr.co/edit/s1UNCXNCZ46zXjte9lpZ?p=preview

희망이 도움이됩니다.