2016-07-21 3 views
0

私は、アプリケーションの一部の要素が非表示になるアプリケーションを作成しています。これらの部分は、ユーザーの種類に応じて表示されます。要素の1つはヘッダーセクションです。このため私はユーザー情報アカウントを格納したサービスを作成し、コントローラに注入しました。私のケースでは、私はheaderControllerに注入しました。 headerController内部で私は、変数を作成します。私は含ま私の見解のheader.phpの中で後サービスのあるNgIFが遅い

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

       } 
      ); 

vm.isProfessional = null; 
私はサービスを呼び出したより

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

が動作しているが、ページがロードされた後、ヘッダ要素が要素を表示するまで少し時間がかかり、視覚的には魅力的ではなく、速くする方法があります。変数vm.isProfession alはブーリアン値をより速く受け取り、時間がかかりません。私はこれが長年のことを約束しているサービスにあると信じていますが、これに関して私はあまりできないと信じています。

上記より私は私のサービスも去ります。 サービス:

(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; 
     } 


    } 

})(); 
+0

こんにちはマルコ 表示または非表示 に表示プロパティの値を反転うそれはRESTの背後にある考え方は、彼らが約束、それと間違っているので、何を使用することをAngularJSで呼び出すです。 authenticatedUserと同じ呼び出しでuserInformationを取得できるように、サービス呼び出しの量を減らすことは可能でしょうか? JSfiddleやそれに類するものにコード全体を入れることができれば、助けが簡単になります。それは可能でしょうか? – mooonli

答えて

1

代わりに、NG-IF用NG-ショーやNGに隠します。

ng-ifの場合、headerCtrl.isProfessionalfalseであるため、div内のコンテンツ全体が処理されません(DOMには存在しません)。また、isTypeプロミスが返るまで処理されず、headerCtrl.isProfessionaltrueに設定します。

ng-showまたはng-hideとすると、divの内容が処理され、必要なバインディングが作成されます。そして、サービスが戻ると、それは単に見https://docs.angularjs.org/api/ng/directive/ngShow

関連する問題