Подождите, пока переменная области не будет загружена до ее использования в представлении angular.js

Я видел этот и этот, но похоже, что может быть более простой способ.

На мой взгляд, у меня есть несколько параметров меню, которые контролируются с помощью разрешения - т.е. не все могут видеть представление "Панель мониторинга". Поэтому в моем пункте меню на мой взгляд у меня есть что-то вроде следующего:

<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. Как я могу дождаться загрузки всех пакетов до отображения рендеринга?

Ответ 1

Если функция validatedPermission возвращает значение false, если allPermissions не загружена. Таким образом, элемент с вашим ng-show не будет отображаться до тех пор, пока не будет загружен allPermissions.

В качестве альтернативы, поставьте ng-show="allPermissions" на прилагаемые <ul> или <ol>.

Ответ 2

Вы спрашиваете:

Как я могу дождаться загрузки всех пакетов до отображения рендеринга?

Чтобы предотвратить рендеринг всего представления, вы должны использовать разрешение. Вам не нужно использовать библиотеку обещаний, поскольку, поскольку $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.
    });
  }
}

Но если вы просто хотите скрыть приборную панель <li> , тогда сделайте так, как предложил Джо Гаутерин. Здесь очень простой пример plunkr, если вам это нужно.

Ответ 3

Вы также можете указать на своем маршрутном контроллере объект разрешения, который будет дожидаться, пока этот объект будет удален до его отображения.

Из angular docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

resolve - {Object. =} - необязательная карта зависимостей, которая должна быть введена в контроллер. Если какая-либо из этих зависимостей promises, они будут разрешены и преобразованы в значение до создания экземпляра контроллера и запускается событие $routeChangeSuccess. Объект карты:

key - {string}: имя зависимостей, которое должно быть введено в контроллер. factory - {string | function}: Если строка является псевдонимом для службы. В противном случае, если функция, то она вводится, а возвращаемое значение рассматривается как зависимость. Если результат является обещанием, он разрешается до того, как его значение будет введено в контроллер.

Ссылка на группу google: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw

Ответ 4

Я столкнулся с подобной ситуацией, вы также можете быстро взглянуть на

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

если вы все еще видите эффект "мерцания".

В соответствии с документацией по углам:

Директива ngCloak используется для предотвращения короткого отображения шаблона Angular html браузером в его исходной (не скомпилированной) форме во время загрузки вашего приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.

Ответ 5

Обертка кода в ng - если исправлена проблема для меня:

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