在angular.js的视图中使用它之前，等待scope变量加载。

I've seen this and this but it seems like there might be a simpler way.

我已经见过这个和这个，但似乎还有更简单的方法。

In my view I have several menu options that are controlled through permissioning - i.e., not everyone can see a "Dashboard" view. So in my menu option in my view I have something like the following:

在我看来，我有几个菜单选项是通过许可控制的，也就是。，并不是每个人都能看到“仪表板”视图。在我的菜单选项中，我有如下内容:

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

In my controller I have a validatePermission method defined where it is looking at the permissions of the current user. For example:

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

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

Also in my controller I'm loading those permissions via an $http call:

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

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

The issue is that $scope.allPermissions doesn't get loaded before the view makes the call to validatePermission. How can I wait for allPermissions to be loaded before the view renders?

问题是，美元的范围。在视图调用validatePermission之前，不会加载allPermissions。如何等待在视图呈现之前加载allPermissions ?

5 个解决方案

#1

Have the validatedPermission function return false when allPermissions hasn't been loaded. That way the element with your ng-show won't be displayed until allPermissions has been loaded.

当allPermissions没有被加载时，确认权限函数返回false。这样，您的ng show的元素就不会显示，直到加载了allPermissions。

Alternatively, put an ng-show="allPermissions" on the enclosing <ul> or <ol>.

或者，在封装的

或

#2

You ask:

你问:

How can I wait for allPermissions to be loaded before the view renders?

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

To prevent the entire view from rendering, you must use resolve. You don't have to use the promise library though, since $http returns a promise:

为了防止整个视图呈现，您必须使用resolve。您不必使用承诺库，因为$http返回一个承诺:

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

But if you simply want to hide the dashboard <li>, then do as Joe Gauterin suggested. Here's a very simple example plunkr if you need it.

但是如果你只是想要隐藏仪表板

，那么按照乔·高特林(Joe Gauterin)的建议去做。如果你需要的话，这是一个非常简单的例子。

,那么按照乔·高特林(Joe Gauterin)的建议去做。如果你需要的话,这是一个非常简单的例子。

#3

You can also specify on your routecontroller a resolve object that will wait for that object to resolve prior to rendering that route.

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

From the angular docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

来自有棱角的文档:https://docs.angularjs.org/api/ngroute/provider/$ routeProvider

resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired. The map object is:

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

key – {string}: a name of a dependency to be injected into the controller. factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller.

键- {string}:要注入到控制器中的依赖项的名称。工厂- {string|函数}:如果字符串，那么它就是服务的别名。否则，如果是函数，则将它注入并将返回值视为依赖项。如果结果是一个承诺，则在将其值注入控制器之前进行解析。

A google group reference as well: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

还有一个谷歌组引用:https://groups.google.com/forum/#!topic/ /QtO8QoxSjYw

#4

I encountered an similar situation, you might also want to take a quick look at

我遇到过类似的情况，你可能也想快速看一下。

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

if you're still seeing a "flicker" effect.

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

As per the angularjs documentation:

根据angularjs文件:

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

ng斗篷指令用于防止浏览器在加载应用程序时以原始(未编译)形式简要显示角html模板。使用此指令可避免html模板显示引起的不希望的闪烁效果。

#5

Wrapping the code in ng-if fixed the issue for me:

在ng中包装代码——如果我解决了这个问题:

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

#1