Angular 1 - 如何延迟渲染直到ng-repeat完成？

Question

我有一个容器组件，使用ng-repeat呈现一群孩子。目前，它们似乎是逐个呈现 - 然而，随着我的应用程序的工作方式，我不想显示任何孩子，直到所有孩子都呈现。否则，有一个明显的涓流，因为它们渲染，导致一个＆＃34;闪烁＆＃34;各种各样的。我怎么能这样做？

搜索过滤器-container.js：

myModule.directive('searchFilterContainer', ['COMPONENTS_PATH', '$timeout', function(COMPONENTS_PATH) {
    return {
        restrict: 'E',
        templateUrl: COMPONENTS_PATH + '/proj/search/search-filter-container.html',
        controller: 'SearchFilterContainerCtrl',
        scope: {
            searchFilters: "<"
        },
        link: function(scope, element, attrs) {
            scope.init();
        }
    };
}]);

myModule.controller('SearchFilterContainerCtrl', ['$scope', function($scope) {
    $scope.init = function() {
        // do stuff
    };
}]);

搜索过滤器-container.html：

<span>
    <search-filter ng-repeat="filter in ::searchFilters" filter-info="::filter"></search-filter>
</span>

搜索-filter.js：

myModule.directive('searchFilter', ['COMPONENTS_PATH', '$timeout', function(COMPONENTS_PATH) {
    return {
        restrict: 'E',
        templateUrl: COMPONENTS_PATH + '/proj/search/search-filter.html',
        controller: 'SearchFilterCtrl',
        scope: {
            filterInfo: '<'
        },
        link: function(scope, element, attrs) {
            scope.init();
        }
    };
}]);

myModule.controller('SearchFilterCtrl', ['$scope', function($scope) {
    $scope.filterText = '';

    /**
     * Initialize the search filter.
     */
    $scope.init = function() {
        //do stuff
    };
}]);

搜索-filter.html：

<div class="search-filter rectangular-pill">
    {{filterText}}
</div>