ng-if는 두 요소를 모두 표시합니다.

Question

두 개 단추는 ng-if를 사용하여 표시할지 여부를 결정합니다. 잠시 동안 두 요소는 함께 표시하면 안되지만 표시됩니다. 고립 된 예제에서는, 이것이 잘 작동하지만, 프로젝트에서 약간의 대기 시간이 있습니다. 이 게시물과 매우 유사 : Angular conditional display using ng-if/ng-show/ng-switch briefly shows both elements하지만 그 어떤 시도도 다른 답변이 없었어요.

<button class="btn btn-primary drop_shadow" ng-if="vm.ingestReady == true" 
       ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak> Start Ingest 
</button> 
<button class="btn btn-danger drop_shadow" ng-if="vm.ingestReady == false" 
       ng-click="vm.ingestReady = !vm.ingestReady" ng-cloak>Cancel Ingest 
</button> 

그리고 컨트롤러 코드는 페이지로드

vm.ingestReady = true; 

입니다. 따라서 버튼을 클릭하면보기가 전환되지만 뜨거운 초에는 둘 다 표시됩니다. 당신이 당신의 스타일이를 추가해야합니다, 그래서 CSS를 사용하여

Answer 1

ng-cloak 작품 :합니다 (btn-primary/btn-danger 및 ng-class)

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
} 

---

보조 노트에

, ng-bind 더 나은 될 수있다 이 유형의 문제에 대한 해결책. 당신은 JS 변수에 버튼의 내용을 결합하는 정도와 같은 기능을 할 수 있습니다 버튼의 범위에, 다음

<button class="btn drop_shadow" 
     ng-class="getButtonClass()" 
     ng-bind="getButtonText()" 
     ng-click="vm.ingestReady = !vm.ingestReady"></button> 

그리고, 당신은 단지 두 개의 참조 JS 함수를 추가해야 할 것 (청소기이 논리 인라인 퍼팅 이상) :

$scope.getButtonClass = function() { 
    return vm.ingestReady ? 'btn-primary' : 'btn-danger'; 
}; 

$scope.getButtonText = function() { 
    return vm.ingestReady ? 'Start Ingest' : 'Cancel Ingest'; 
}; 

Answer 2

이것은 ngAnimate가 원인입니다. 사용하지 않는 경우 제거하십시오. ngAnimate를 제거하지 않으려면 다음 CSS를 앱에 추가하십시오. angular ng-if or ng-show responds slow (2second delay?)