2016-01-13 186 views
0

所以我不知道如何從指令更改範圍變量。更改範圍變量從指令在我的情況

我想設置的變量signuptoggle返回FALSE當動畫完成,所以它會加載每次我按下登錄按鈕/鏈接時第一個登錄界面。

指令模板:

<!-- Login --> 
<div ng-controller="loginController" class="modal" id="loginDialog" tabindex="-1" role="dialog" aria-labelledby="loginDialog"> 
    <div ng-show="!signuptoggle" class="modal-dialog loginDialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" id="closeLoginDialog" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title"><img class="img-loginlogo" src="images/logo-SMgrey.png"></h4> 
      <h3>Don't have an account yet?<a id="signupbtn" href="#" ng-click="signuptoggle = true">Sign up</a></h3> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="login-form-input-area"> 
         <input type="email" id="sign-in-email" name="sign-up-email" placeholder="Email Address" required> 
        </div> 
        <div class="login-form-input-area"> 
         <input type="password" id="sign-in-password" name="sign-up-password" placeholder="Password" required> 
        </div> 
        <div class="login-form-input-area"> 
         <input class="btn btn-default login-btn" type="submit" value="SIGN IN"> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <p class="login-separator"><span class="login-separator-mid">or</span></p> 
       <p>Sign in with your social account.</p> 
       <div class="login-social-icons"> 
        <a href="#"><img src="images/icons/fb-social-icon.png" title="Sign up with Facebook"></a> 
        <a href="#"><img src="images/icons/g-social-icon.png" title="Sign up with Gmail"></a> 
        <a href="#"><img src="images/icons/tw-social-icon.png" title="Sign up with Twitter"></a> 
       </div> 
       <p class="login-terms">By continuing you agree to Social Markt's <a href="#">Terms of Service</a></p> 
      </div> 
     </div> 
    </div> 


    <div ng-show="signuptoggle" class="modal-dialog loginDialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" id="closeSignUpDialog" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title"><img class="img-loginlogo" src="images/logo-SMgrey.png"></h4> 
      <h3>Already have an account?<a id="signinbtn" href="#" ng-click="signuptoggle = false">Sign in</a></h3> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="login-form-input-area"> 
         <input type="text" id="sign-up-first-name" name="sign-up-first-name" placeholder="First Name" required> 
         <input type="text" id="sign-up-last-name" name="sign-up-last-name" placeholder="Last Name" required> 
        </div> 
        <div class="login-form-input-area"> 
         <input type="email" id="sign-up-email" name="sign-up-email" placeholder="Email Address" required> 
        </div> 
        <div class="login-form-input-area"> 
         <input type="password" id="sign-up-password" name="sign-up-password" placeholder="Password" required> 
         <input class="btn btn-default signup-btn" type="submit" value="SIGN UP"> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <p class="login-separator"><span class="login-separator-mid">or</span></p> 
       <p>Sign up faster by connecting your social account.</p> 
       <div class="login-social-icons"> 
        <a href="#"><img src="images/icons/fb-social-icon.png" title="Sign up with Facebook"></a> 
        <a href="#"><img src="images/icons/g-social-icon.png" title="Sign up with Gmail"></a> 
        <a href="#"><img src="images/icons/tw-social-icon.png" title="Sign up with Twitter"></a> 
       </div> 
       <p class="login-terms">By continuing you agree to Social Markt's <a href="#">Terms of Service</a></p> 
      </div> 
     </div> 
    </div> 

</div> 

自定義元素:

<home-login-dialog data-id="login" model="$parent"></home-login-dialog> 

指令:

socialMarkt.directive("homeLoginDialog", [function(){ 
return{ 
    restrict: 'E', 
    templateUrl: 'app/partials/homeLoginDialogView.html', 
    link: function(scope, elem, attrs){ 
     angular.element('#' + attrs.id).click(function(){ 
      var animationNameIn = "in animated bounceInDown"; 
      var atEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; 

      angular.element('#loginDialog').addClass(animationNameIn).modal('show').one(atEnd, function(){ 
       angular.element(this).removeClass(animationNameIn); 
      }); 
     }); 

     angular.element('#closeLoginDialog').click(function(){ 

      var atEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; 

      angular.element('#loginDialog').addClass("animated bounceOutUp").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
        angular.element(this).removeClass("animated bounceOutUp") 
       }).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
        angular.element('#loginDialog').modal('hide'); 
       }); 
     }); 


     angular.element('#closeSignUpDialog').click(function(){ 

      var atEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; 

      angular.element('#loginDialog').addClass("animated bounceOutUp").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
        angular.element(this).removeClass("animated bounceOutUp") 
       }).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){ 
        angular.element('#loginDialog').modal('hide'); 

        scope.$apply(function(){ 
         scope.signuptoggle = false; 
        }); 

       }); 
     }); 
    } 
}}]); 

Cotroller:

socialMarkt.controller('loginController', ['$scope', function($scope){}]); 

正如你可以看到即時通訊使用jquery(angular.element)來照顧動畫。

im使用納克單擊以改變可變signuptoggleNG-顯示的值來監視signuptoggle變量以便顯示DIV或沒有。

問題是,當我點擊SIGN IN打開SIGN IN屏幕並切換到SIGN UP屏幕時,即使在關閉窗口(浮動模式)後,它仍然保持在SIGN UP屏幕上。所以我試圖設置變量signuptoggle回到假每當關閉模態窗口。

+0

你可以發佈你的控制器代碼嗎? – Dan

+0

控制器是空的。 –

回答

0

已解決。我改變了改變屏幕以使用控制器的方式。