2016-04-09 20 views
1

$rootScope.$broadcast('signinBegin')'u tetikleyen Angular uygulamasında bir eklenti kullanıyorum. ng-if ile bir preloader göstermek istiyorum ama $scope.$on('signinBegin',function(){...}) eklemek için bu denetleyiciye erişimim yok. HTML görünümünde etkinlik başladığında denetleyici olmadan önyükleyici nasıl gösterilmeli?

<div ng-if="preloader"> 
    <img src="../assets/img/preloader/material.gif" alt="preloader"> 
</div> 
<div id="sign-form" class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-12">   
       <!-- ng-submit should be signin() --> 
       <form ng-submit="signin()" role="form" autocomplete="off" class="form-horizontal"> 
        <fieldset>          
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-user"></i></span> 
          <input ng-model="user.email" type="text" class="form-control" id="email" placeholder="Email" required> 
         </div> 
         <div class="spacing"></div> 
         <div class="input-group"> 
          <span class="input-group-addon"><i class="fa fa-key"></i></span> 
          <input ng-model="user.password" type="password" class="form-control" id="password" placeholder="Password"> 
         </div> 
         <div class="spacing"></div> 
         <button type="submit" class="btn btn-success btn-sm pull-right">Sign In</button> 
        </fieldset> 
       </form> 
       <a ui-sref="forget-password" class="grey">Forget Password?</a> 
      </div> 

     </div> 

    </div> 
</div> 

ve bu app.config

app.config(function($stateProvider,$urlRouterProvider,$locationProvider,$authProvider) { 
    $authProvider.signinState = 'login'; 
    $authProvider.signinRoute = '/login'; 

Ben ng-AA eklenti kullanmak.

Teşekkürler

+0

nasıl bu görünüm ilk etapta ilave ediliyor? – mindparse

+0

Kodunuzu buraya ekleyebilir misiniz? veya buradan kod gönderebilir misin? – roshini

+0

Kod ekledim. Bu sayfa için denetleyicim yok –

cevap

1

Muhtemelen direktifleri kullanabilirsiniz. Örneğin:

myApp.directive('signinBeginFoo', function() { 
    return { 
     scope: true, 
     link: function($scope) { 
      $scope.$on('signinBegin', function() { 
       $scope.preloader = true; 
      }); 
     } 
    } 
}); 

Şimdi, DOM değiştirin:

<signin-begin-foo> 
    <div ng-if="preloader"> 
     <img src="../assets/img/preloader/material.gif" alt="preloader"> 
    </div> 
</signin-begin-foo> 
İlgili konular