Я видел этот и этот, но похоже, что может быть более простой способ.
На мой взгляд, у меня есть несколько параметров меню, которые контролируются с помощью разрешения - т.е. не все могут видеть представление "Панель мониторинга". Поэтому в моем пункте меню на мой взгляд у меня есть что-то вроде следующего:
<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. Как я могу дождаться загрузки всех пакетов до отображения рендеринга?
Если функция validatedPermission возвращает значение false, если allPermissions не загружена. Таким образом, элемент с вашим ng-show не будет отображаться до тех пор, пока не будет загружен allPermissions.
В качестве альтернативы, поставьте ng-show="allPermissions" на прилагаемые <ul> или <ol>.
Вы спрашиваете:
Как я могу дождаться загрузки всех пакетов до отображения рендеринга?
Чтобы предотвратить рендеринг всего представления, вы должны использовать разрешение. Вам не нужно использовать библиотеку обещаний, поскольку, поскольку $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, если вам это нужно.
Вы также можете указать на своем маршрутном контроллере объект разрешения, который будет дожидаться, пока этот объект будет удален до его отображения.
Из 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
Я столкнулся с подобной ситуацией, вы также можете быстро взглянуть на
http://docs.angularjs.org/api/ng/directive/ngCloak
если вы все еще видите эффект "мерцания".
В соответствии с документацией по углам:
Директива ngCloak используется для предотвращения короткого отображения шаблона Angular html браузером в его исходной (не скомпилированной) форме во время загрузки вашего приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.
Обертка кода в ng - если исправлена проблема для меня:
<div ng-if="dependentObject">
<!-- code for dependentObject goes here -->
</div>