Question

我见过this和this，但似乎可能有更简单的方法。

在我看来，我有几个通过权限控制的菜单选项 - 也就是说，不是每个人都可以看到“仪表板”视图。所以在我的菜单选项中，我有以下内容：

<li ng-show="validatePermission('Dashboard')">Dashboard</li>

在我的控制器中，我定义了一个validatePermission方法，用于查看当前用户的权限。例如：

  $scope.validatePermission = function(objectName) {
    if $scope.allPermissions......

同样在我的控制器中，我通过$ http调用加载这些权限：

  $http.get('permissions/' + userid + '.json').success(function(data) {  
    $scope.allPermissions = data;....

问题是$ scope.allPermissions在视图调用validatePermission之前没有加载。如何在视图呈现之前等待allPermissions加载？

Answer 1

你问：

如何在视图渲染之前等待allPermissions加载？

要防止整个视图呈现，必须使用resolve。您不必使用promise库，因为$ http会返回一个promise：

var app = angular.module('app');

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/', {
        templateUrl : 'template.html',
        controller : 'MyCtrl',
        resolve : MyCtrl.resolve
  });
});

function MyCtrl ($scope, myHttpResponse) {
   // controller logic
}

MyCtrl.resolve = {
  myHttpResponse : function($http) {
    return $http({
        method: 'GET',
        url: 'http://example.com'
    })
    .success(function(data, status) {
        // Probably no need to do anything here.
    })
    .error(function(data, status){
        // Maybe add an error message to a service here.
        // In this case your $http promise was rejected automatically and the view won't render.
    });
  }
}

但是，如果您只想隐藏仪表板＆lt; li＆gt;，那就像Joe Gauterin建议的那样。如果您需要，这是一个非常简单的example plunkr。

Answer 2

validatedPermission函数在allPermissions未加载时返回false。这样，在ng-show加载之前，您的allPermissions元素就会显示出来。

或者，将ng-show="allPermissions"放在封闭的<ul>或<ol>上。

Answer 3

您还可以在routecontroller上指定一个解析对象，该对象将在呈现该路径之前等待该对象解析。

来自角度文档：https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

resolve - {Object。=} - 应该注入控制器的可选依赖关系图。如果这些依赖项中的任何一个是promise，它们将在实例化控制器并触发$ routeChangeSuccess事件之前被解析并转换为值。地图对象是：

key - {string}：要注入控制器的依赖项的名称。 factory - {string | function}：如果是string，那么它是服务的别名。否则，如果是函数，则将其注入，并将返回值视为依赖项。如果结果是一个promise，则在将其值注入控制器之前解析它。

google小组参考：https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

Answer 4

我遇到了类似的情况，您可能还想快速查看

http://docs.angularjs.org/api/ng/directive/ngCloak

如果你仍然看到“闪烁”效果。

根据angularjs文档：

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

Answer 5

将代码包装在ng中 - 如果我解决了这个问题：

<div ng-if="dependentObject">
  <!-- code for dependentObject goes here -->
</div>

等到范围变量加载后再在angular.js的视图中使用它

5 个答案: