angularjs - promesas - Espere hasta que se cargue la variable de ámbito antes de usarla en la vista en angular.js

promise angular 6

Question

He visto this y this pero parece que podría haber una manera más simple.

En mi opinión, tengo varias opciones de menú que se controlan a través de permisos, es decir, no todos pueden ver una vista de "Tablero". Entonces, en mi opción de menú, en mi opinión, tengo algo como lo siguiente:

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

En mi controlador, tengo un método validaPermission definido en el que se buscan los permisos del usuario actual. Por ejemplo:

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

También en mi controlador estoy cargando esos permisos a través de una llamada $ http:

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

El problema es que $ scope.allPermissions no se carga antes de que la vista realice la llamada a validatePermission. ¿Cómo puedo esperar que se carguen todas las Permissions antes de que se visualice la vista?

Answer 1

Encontré una situación similar, es posible que también desee echar un vistazo rápido a

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

si todavía estás viendo un efecto de "parpadeo".

Según la documentación angularjs:

La directiva ngCloak se usa para evitar que la plantilla html angular se muestre brevemente en el navegador en su formato sin formato (sin compilar) mientras la aplicación se está cargando. Utilice esta directiva para evitar el efecto de parpadeo indeseable causado por la visualización de la plantilla html.

Answer 2

Envolviendo el código en ng, si el problema se solucionó para mí:

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

Answer 3

Haga que la función validatedPermission devuelva false cuando allPermissions no se haya cargado. De esta forma, el elemento con su ng-show no se mostrará hasta que se haya cargado allPermissions .

Alternativamente, ponga un ng-show="allPermissions" en el adjunto <ul> o <ol> .

Answer 4

También puede especificar en su routecontroller un objeto de resolución que esperará a que ese objeto se resuelva antes de renderizar esa ruta.

De los documentos angulares: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

resolve - {Object. =} - Un mapa opcional de dependencias que debe ser inyectado en el controlador. Si alguna de estas dependencias son promesas, se resolverán y convertirán a un valor antes de que se cree una instancia del controlador y se active el evento $ routeChangeSuccess. El objeto del mapa es:

clave - {cadena}: nombre de una dependencia que se inyectará en el controlador. fábrica - {cadena | función}: si es cadena, entonces es un alias para un servicio. De lo contrario, si funciona, entonces se inyecta y el valor de retorno se trata como la dependencia. Si el resultado es una promesa, se resuelve antes de que su valor se inyecte en el controlador.

Una referencia de grupo de google también: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

Answer 5

Usted pregunta:

¿Cómo puedo esperar que se carguen todas las Permissions antes de que se visualice la vista?

Para evitar que se reproduzca toda la vista, debe usar resolver. No es necesario usar la biblioteca de promesas, ya que $ http devuelve una promesa:

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

Pero si simplemente quiere ocultar el tablero <li>, entonces haga lo que Joe Gauterin sugirió. Aquí hay un ejemplo muy simple de plunkr si lo necesitas.