32

我已经看过这个和这个，但似乎可能有更简单的方法。

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

<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;....

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

4

5 回答 5

21

你问：

如何在视图呈现之前等待加载 allPermissions？

要防止整个视图呈现，您必须使用解析。不过，您不必使用 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.
    });
  }
}

但是，如果您只是想隐藏仪表板 <li>，请按照 Joe Gauterin 的建议进行操作。如果您需要，这是一个非常简单的示例 plunkr 。

于 2013-05-18T02:36:28.163 回答
10

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

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

于 2013-05-17T20:28:01.543 回答
6

您还可以在您的路由控制器上指定一个解析对象，该对象将在渲染该路由之前等待该对象解析。

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

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

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

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

于 2013-05-17T20:29:17.090 回答
4

我遇到过类似的情况，你可能还想快速浏览一下

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

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

根据 angularjs 文档：

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

于 2014-03-10T23:20:56.363 回答
2

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

<div ng-if="dependentObject">
  <!-- code for dependentObject goes here -->
</div>
于 2016-11-16T21:33:59.587 回答