Question

我正在创建一个应用程序，其中隐藏了应用程序中的某些部分/元素，这些部分将根据用户类型显示或不显示。其中一个元素是标题部分。为此，我创建了一个服务，我存储了用户信息帐户，然后我注入了一个控制器，在我的情况下我注入了headerController。在headerController中我创建了一个变量：

vm.isProfessional = null;

比我打电话给服务：

 ProfileService.isType("professional").then(
                function (result) {
                    vm.isProfessional = result;

                }
            );

在我看来header.php后，我包括：

<div  ng-if="headerCtrl.isProfessional" >
...
</div>

正在工作，但唯一的问题是需要一些时间，在页面加载后，header元素需要一些时间才能显示元素，并且在视觉上它不吸引人，是否有办法使它成为可能更快，变量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; 
        }


    }

})();

Answer 1

而不是ng-if，使用ng-show或ng-hide。

使用ng-if，您的div中的所有内容都不会被处理（在DOM中不存在），因为headerCtrl.isProfessional是false。在isType promise返回并将headerCtrl.isProfessional设置为true之前，它不会被处理。

使用ng-show或ng-hide，将处理div的内容，并创建必要的绑定。一旦服务返回，它只会将display属性的值翻转为可见或隐藏见https://docs.angularjs.org/api/ng/directive/ngShow

服务的NgIF很慢

1 个答案: