2014-11-17 4 views
1
<div ng-switch="signedIn()"> 
    <a ng-switch-when="false" >Text1</a> 
    <a ng-href="#/post_form" ng-switch-when="true">Text2</a> 
</div> 

편집 // 동시에 표시 각도 조건부

$ scope.signedIn이 텍스트 1, 텍스트 2 모두 볼 수 있습니다 변경하기됩니다. 로그인/로그 아웃 할 때까지 의도 한대로 작동합니다. 그런 다음 잠시 동안 Text1과 Text2가 모두 표시됩니다. NG 숨기기/쇼 NG-경우 사용하는 제안

편집 //

모든 답변 - 문제가 아직도있다.

나는 ng-if가 "DOM friendly"임을 알고 있습니다.

+1

더 많은 정보를 제공하십시오, plnkr이 도움이 될 것입니다 – 23tux

+1

또는 적어도 컨트롤러의 코드 – Brocco

+0

plunker 예제가 없으면 이것이 바로 적용되지만 Angular docs에서 "NgCloak 지시문이 사용되었습니다. 응용 프로그램이로드되는 동안 원시 HTML 템플리트가 원시 (컴파일되지 않은) 양식으로 브라우저에 의해 잠깐 표시되는 것을 방지하려면이 지정 문을 사용하여 html 템플리트 표시로 인한 바람직하지 않은 깜박임 효과를 피하십시오 "- https : //docs.angularjs .org/api/ng/directive/ngCloak – OddEssay

답변

1

border-bottom 속성에도 트랜지션을 적용하여 문제를 해결했기 때문에 문제가 해결되었습니다.

0

간단한 부울 값으로 ng-switch가 필요하지 않습니다. 당신은 NG 쇼 대신 NG 숨기기를 사용할 수 있습니다

<a ng-hide="signedIn()" >Text1</a> 
<a ng-href="#/post_form" ng-show="signedIn()">Text2</a> 
+0

나는 그것을 시도했지만 여전히 잘못되었다. – user3002996

0
<div ng-switch-on="signedIn()"> 
    <a ng-switch-when="false">Text1</a> 
    <a ng-href="#/post_form" ng-switch-when="true">Text2</a> 
</div> 
+0

아무 것도 변경하지 않습니다. – user3002996

2

나는 단순하고 스위치의 가독성뿐만 아니라이 제공하는 중첩을 이해하지만 좀 더 기본적인 뭔가가는 제안 .

rhasarub가 답변에 제안한 ng-show/ng-hide 접근 방식을 사용할 수는 있지만 로그인과 관련하여 뭔가하는 것으로 보이기 때문에 ng-if을 사용하는 것이 좋습니다. 차이점은 조건이 충족되지 않으면 DOM이 전혀 렌더링되지 않으므로 궁금한/지식이있는 사용자가 DOM을 검사 할 수 없다는 것입니다.

<a ng-if="!signedIn()" >Text1</a> 
<a ng-href="#/post_form" ng-if="signedIn()">Text2</a> 
+0

ng-if가 "DOM friendly"라는 것을 알고 있습니다. 그러나 문제는 여전히 존재합니다. 나는 설명을 갱신했다. – user3002996

+0

컨트롤러의 코드 또는 적어도 그 코드를 제공하십시오. 값은 오직 하나 또는 다른 값이어야하며 다이제스트 루프가 실행될 때 DOM은 한 번 업데이트됩니다. 'ngAnimate'를 통해 표시/숨기기에서 지연을 일으킬 수있는 CSS가 있습니까? – Brocco