Question

我有布局：

<li ng-click="GetLoader();"><a href="../Account/#/PersonalInfo">ACCOUNT</a></li>
<li ng-click="GetLoader();"><a href="#">SETTINGS</a></li>

在索引页面上，我有一个菜单和ng-view，我可以在点击中更改页面索引页面中还包含一个微调器。

<div class="loading" ng-show="ticketloading" ng-init="GetLoader()">
    <div>
        <img class="spinner" ng-src="~/Images/ajax-loader.gif" />
    </div>
</div>

在我的剧本中我有 -

$scope.GetLoader = function() {
    $scope.ticketloading = true;
    loader.css("z-index", "1");
}

我的问题是，当用户点击“帐户”时，它会被加载，但只有几毫秒。然后它变为全部空白。我从ng-view接收数据。我的问题是如何延迟显示ng-view以显示加载程序更长一点。 Thanx提前！

Answer 1

首先，您应该避免在控制器中使用DOM操作。在您的情况下，最好使用声明性ngClass指令来设置不透明度。

然后您的实际问题是您不想使用静态setTimeout来隐藏加载，而是倾听$routeChangeSuccess：

$rootScope.$on('$routeChangeSuccess', function() {
    $rootScope.ticketloading = false;
});

并在模板中使用此加载标记，就像您当前所做的那样。

例如，您可以将上面的事件侦听器放在运行块中。

Answer 2

您可以在控制器中添加属性，例如dataLoading，并将ng-if属性添加到ng-view，如下所示：

布局

<div ng-view ng-if="!dataLoading">

控制器

function loadData()
{
     var self = this;
     self.dataLoading = true;
     dataService.loadData(params, function(){
           ...
           self.dataLoading = false;
     });
}

有没有办法延迟ng-view？

2 个答案: