AngularJs 非常缓慢地评估 ng-show

Question

情况：

在我的应用程序中，我有最多 12 个部分。 但并不是每次都必须显示，这取决于包含相关数据的对象是否为空。

在视图中，我检查每个对象，如果对象为空，则不显示相关部分。

就是这样。

问题在于，这会导致在主视图中显示按钮（链接到每个部分）时出现明显延迟。在 0.5 到 1 秒之间。 这实在是太多了。 如果没有 ng-show，按钮会立即显示，但我需要进行此项检查。

问题：

我可以做些什么来让 AngularJs 更快地评估？

我已经尝试了几种方法来进行检查，但延迟保持不变。

ATTEMPT 1 - 一般功能和 ng-show：

使用检查对象是否为空的通用函数：

$scope.isEmpty = function(obj) 
{
    // Return true if empty
    if (obj == null) return true;
    if (obj.length === 0)  return true;

    // Return false if not empty
    if (obj.length > 0)    return false;

    for (var key in obj) 
    {
        if (hasOwnProperty.call(obj, key)) return false;
    }

    return true;
}

观点：

<button class="button" ui-sref="app.section_1" ng-show="!isEmpty(section1_data)">Section 1 </button>

ATTEMPT 2 - 更简单的检查和 ng-show：

<button class="button" ui-sref="app.section_1" ng-show="section1_data.length > 0">Section 1 </button>

ATTEMPT 3 - 通用函数和 ng-if

<button class="button" ui-sref="app.section_1" ng-if="!isEmpty(section1_data)">Section 1 </button>

ATTEMPT 4 - 简单检查和 ng-if

<button class="button" ui-sref="app.section_1" ng-if="section1_data.length > 0">Section 1 </button>

结论：

对于所有这 4 次尝试，Angular 需要评估的时间是相同的。

我真的需要加快这个过程，但我已经没有想法了。 有人知道我该如何实现吗？

谢谢！

Answer 1

用 ng-if 替换 ng-show/ng-hide