Я создаю приложение, в котором некоторые части/элементы из приложения будут скрыты, эти части в зависимости от типа пользователя будут показаны или нет. Одним из элементов является раздел заголовка. Для этого я создал службу, в которой храню учетную запись пользовательской информации, а затем я ввел ее в контроллер, в моем случае я ввел в headerController. Внутри headerController создаю переменную:
vm.isProfessional = null;
Чем я называю услугу:
ProfileService.isType("professional").then(
function (result) {
vm.isProfessional = result;
}
);
После моего просмотра header.php я включил:
<div ng-if="headerCtrl.isProfessional" >
...
</div>
Работает, но единственная проблема занимает некоторое время после загрузки страницы, элемент заголовка занимает некоторое время, пока не покажет элемент, и визуально это не привлекательно, есть ли способ сделать это быстрее, переменная vm.ISProfessional получает быстрее логическое значение, чтобы не занимать столько времени? Я верю, что это заставляет так долго заниматься службой, которая дает обещание, но я считаю, что в отношении этого я не могу многое сделать.
Выше я тоже оставляю свое служение. Обслуживание:
(function () {
'use strict';
angular
.module('myApp')
.factory('ProfileService', ProfileService);
ProfileService.$inject = ['$http','UserService','$q'];
/* @ngInject */
function ProfileService($http, UserService,$q) {
var service = {
isType: isType
};
return service;
function isType(accountName) {
var deferred = $q.defer();
UserService.getAuthenticatedUser()
.then(function (response) {
var data = response.data;
UserService.getUserInformation(data.user.id)
.then(function (response) {
var userDetails = response.data;
deferred.resolve(accountName == userDetails.account_types[0].description_internal);
return;
});
});
return deferred.promise;
}
}
})();
вместо ng-if, используйте ng-show или ng-hide.
С ng-if
весь контент внутри вашего div не обрабатывается (не существует в DOM), поскольку headerCtrl.isProfessional
является false
. И это не будет обработано до тех пор, пока не будет получено обещание isType, и установите для параметра headerCtrl.isProfessional
значение true
.
С ng-show
или ng-hide
содержимое div будет обработано, будут созданы необходимые привязки. И как только служба вернется, она просто изменит значение свойства отображения на видимое или скрытое. Https://docs.angularjs.org/api/ng/directive/ngShow