transclusion, replace 및 ngIf를 결합하는 방법은 무엇입니까?

Question

각도 1.2.9 사용 (작성 당시 최신 안정). 문제를 보여줍니다 지침의 최소 예 :

myApp.directive('panel', function() { 
    return { 
     transclude: true, 
     replace: true, 
     template: '<div ng-if="showPanel" ng-transclude></div>', 
    }; 
}); 

jsFiddle : 콘솔을 열고 확인란을 전환 http://jsfiddle.net/HB7LU/3782/. 고아가 된 ngTransclude에 대해 불평합니다. 내가 알 수있는 한, 이것은 ngIf도 transclusion을 사용한다는 사실과 관련이 있습니다.

각도 버그인지 또는 내가 잘못했는지 여부가 확실하지 않습니다.

좀 해결 방법을 생각할 수 있습니다

• 이 ng-if를 제거하고 수동으로 동작을 구현한다. 그러나 그것의 구현은 수십 라인이며, 그것을 충분히 재현하기에 충분하지 않습니다.
• 바꾸기 사용을 중지하고 템플릿 사용을 중지하고 지시어 요소 자체에 필요한 모든 스타일과 클래스를 설정합니다. 이렇게하려면 코드에서 템플릿의 구조를 재현하는 데 필요한 여러 가지 JavaScript 코드가 필요합니다. 모든 솔루션/해결에

제약 : 나는 인 flexbox를 사용하고 있기 때문에

• , 생성 된 요소는 지침의 부모 요소의 직접 자식이어야 (즉 않습니다 대체 무엇을).
• ngIf은 지시문의 분리 범위에 의존하는 조건을 사용하고 있기 때문에 지시문 외부로 이동할 수 없습니다.

더 좋은 방법은 없나요?

Answer 1

가장 쉬운 방법은 대신 ng-show을 사용하는 것입니다.

DOM 트리에서 요소를 절대적으로 제거해야하는 경우 사용자 지정 솔루션을 만드는 것이 어렵지 않습니다. 트랜스 클루 전은 단순한 함수 호출이며, 나머지는 값을보고하고, DOM에서 요소를 추가/제거로 요약된다 :

return { 
    transclude: true, 
    replace: true, 
    scope: { 
     showPanel: '=' 
    }, 
    template: '<div></div>', 
    link: function(scope, element, attrs, controller, transclude) { 
     var parent = element.parent(), 
      insertAfter = angular.element(element[0].previousSibling); 

     transclude(scope.$parent, function (clone) {  
      element.append(clone); 
     }); 

     scope.$watch('showPanel', function(value) { 
      if (value) {   
       $animate.enter(element, parent, insertAfter); 
      } 
      else { 
       $animate.leave(element); 
      } 
     }); 
    } 
}; 

가 여기에 working fiddle입니다. 물론 상황에 맞게 조정할 수도 있습니다. 애니메이션을 원하지 않는 경우에는 angular.element의 각 메소드를 사용하십시오.