ngAnimateSwap에 자신의 컨트롤러가있는 지시문은 모든 '스왑'에서 새 컨트롤러가 초기화되도록합니다.

Question

컨트롤러가 있고 컨트롤러가이 컨트롤러에 바인딩되는 지시문 (ParentDir)을 만들었습니다. 첫 번째 부모 지시문을 '요구'하는 자체 컨트롤러가있는 다른 지시문 (Child1)과 통신합니다.

Module.directive("ParentDir", function() { 
return { 
    templateUrl: '../ParentTemplate', 
    restrict: 'AEC', 
    scope: {  
     }, 
    controllerAs: 'parCtrl', 
    bindToController: true, 
    controller: ['$scope', function ($scope) { 
     parCtrl= this; 
     parCtrl.title = "PARENT 1 TITLE"; 
     }]} 


Module.directive("Child1", function() { 
return { 
    templateUrl: '../Child1Template', 
    restrict: 'AEC', 
    require: '^^ParentDir', 
    scope: {}, 
    controllerAs: 'ch1Ctrl', 
    bindToController: true, 

    link: function ($scope, element, attrs, parCtrl) { 
     $scope.parCtrl= parCtrl; 
    }, 

    controller: ['$scope', function ($scope) { 
      ch1Ctrl= this; 
      ch1Ctrl.title = "CHILD 1 TITLE"; 
}]} 

ParentDir의 HTML :

 <child1> </child1> 

자식 1의 HTML : 다음은 간단한 예입니다

마지막으로 내 ParentDirective은 이런 식으로 초기화

{{parCtrl.title}} 
    {{ch1Ctrl.title}} 

:

<div ng-animate-swap="trigger" class="swapclass"> 
     <parent-dir></parent-dir> 
    </div> 

내가 필요해. 그는 전체 부모 지시어의 템플릿을 슬라이드 할 수 있습니다. 나는 또한 내가 필요로하지 않는 다른 장소에서 지시어를 사용하며 그대로 사용할 수있다. 슬라이드 애니메이션이 필요한 경우 위와 같이 ng-animate-swap 안에 배치합니다. 문제는 스왑 트리거가 변경 될 때마다 새로운 parCtrl이 초기화되어 모든 것이 재설정되도록하는 것입니다.

스왑이 발생할 때마다 컨트롤러를 다시 초기화하지 않고도 범위를 분리하고 자체 컨트롤러가있는 지시문을 사용하여 애니메이션 스왑을 어떻게 사용할 수 있습니까?

Answer 1

지시어는 Angular의 컴파일러에게 지정된 동작을 HTML 요소에 첨부하도록 지시하는 고급 마커입니다. 지시문이 DOM에 놓이면 Angular의 $compile 서비스는 지시문 이름을 해당 코드와 일치시키고 정규화 한 후 실행합니다.

그러나 ng-animate-swap은 새 요소를 추가하기 전에 요소를 DOM에서 제거합니다.

이것은 각 스왑에 대해 지시문을 다시 컴파일하고 애니메이션이 발생할 때마다 새로운 격리 범위가 만들어 짐을 의미합니다.

이에 대한 해결책 앱의 기능에 따라 달라집니다

, 템플릿은 얼마나 큰, 당신은 애니메이션을 (또는 애니메이션이 수반 무엇을) 할 필요가 얼마나 자주 :

하나의 해결책은 다른 지침을 만드는 것입니다 보유 스왑 애니메이션의 외부 parCtrl.title 및 ch1Ctrl.title (또는 당신이 다른 어떤 변수) 후 아이까지 그 정보를 전달 할 수있는 프로토 타입 상속을 통해 스코프 :

<swap-dir> 
     <div ng-animate-swap="trigger" class="swapclass"> 
     <parent-dir></parent-dir> 
     </div> 
    <swap-dir> 

이것은 또한 컨트롤러와 함께 할 수있는, 아마 훨씬 더 쉽게. 선택 범위는 범위 변수를 가져 오는 위치와 페이지에있는 요소의 수에 따라 달라집니다. 내가 생각하는 동안이 작동 할 수 있도록

그러나, ng-animate-swap, 그 자신의 범위를 만들고, 끊임없이 재미 자바 스크립트 상속 헛소리도 여기에 문제의 원인이 될 수 있습니다.

또 다른 해결책은 ng-animate-swap을 건너 뛰고 정규식 이전 CSS 전환으로 템플릿 요소를 움직이는 것입니다.이 작업은 수행중인 작업과 사용자가 원하는 방식에 따라 달라집니다.