Question

我想在一个视图中显示两个部分中的一个。

<div ng-if="countApps() > 0">
  //stuff to show
</div>

或

<div ng-if="countApps() == 0">
  //stuff to show
</div>

在页面加载时，控制器将检索应用程序并填充$scope.apps变量。我在控制器中有一个名为$scope.countApps的函数，它将返回$ scope.apps的长度。

问题在于＆＃34; 0应用程序＆＃34;视图的一部分将在结果仍然被提取时出现，然后如果找到一个或多个应用程序，它将删除它并将其替换为视图的其他部分。

如何才能显示正确的视图？我知道resolve，但我不想阻止整个视图，只有ng-if部分。

Answer 1

而不是返回计数的函数，只需绑定到计数。因此，在控制器初始化时，将countApps设置为非值（未定义），然后设置应用程序的任何设置，也会将countApps设置为正确的值。在初始加载时，ng-if在两种情况下都会解析为false。页面的其余部分将加载，这些部分将在完成后赶上。

Answer 2

如果您使用ngRoute，请查看$routeProvider的resolve方法中的when选项。

这将允许您在异步过程完成时更新范围。所以最初你会隐藏视图，然后在解决方案中切换一个标志来显示所有内容。

斯科特·艾伦（Scott Allen）有一篇不错的帖子here。

John Papa也有一个略有不同的帖子here。

Answer 3

看一下路由方面的决心，意思是在你加载html之前，它会从服务加载数据，它可以是一个http服务或其他东西。

  $routeProvider
    .when('/',
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
      resolve: {
        apps: function (appsService) {
          return appsService.fetchApps();
        }
      }
    }

然后在你的控制器中，

.controller('myController', ['$scope', 'apps', function($scope, apps) {
            $scope.apps = apps;
        }
    ]);

现在，html会在显示之前等待项目被解析。在控制器和视图加载之前的含义，它将从appsService服务获取应用程序数据。

ngIf执行得太早

3 个答案: