ng-if显示两个元素

时间:2016-06-24 20:31:29

标签: angularjs ng-show angular-ng-if

我有两个使用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;
页面加载时

所以点击按钮应该只是切换视图,但是对于一个热的秒,两者都是可见的。

2 个答案:

答案 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';
};