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;

页面加载时

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

Answer 1

这是由ngAnimate引起的。如果您不使用它，请尝试将其删除。如果您不想删除ngAnimate，请将以下css添加到您的应用中。

.ng-leave {
    display:none !important;
}

更详细的回答angular ng-if or ng-show responds slow (2second delay?)

Answer 2

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

ng-if显示两个元素

2 个答案: