我有两个使用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;
页面加载时所以点击按钮应该只是切换视图,但是对于一个热的秒,两者都是可见的。
答案 0 :(得分:3)
这是由ngAnimate引起的。如果您不使用它,请尝试将其删除。 如果您不想删除ngAnimate,请将以下css添加到您的应用中。
.ng-leave {
display:none !important;
}
更详细的回答angular ng-if or ng-show responds slow (2second delay?)
答案 1 :(得分:0)
ng-cloak
使用CSS,因此您需要将其添加到您的样式中:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
在旁注中,ng-bind
(以及btn-primary
/ btn-danger
的{{3}})可能是针对此类问题的更好解决方案。您可以将按钮的内容绑定到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';
};