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">×</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">×</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使用纳克单击以改变可变signuptoggle和NG-显示的值来监视signuptoggle变量以便显示DIV或没有。
问题是,当我点击SIGN IN打开SIGN IN屏幕并切换到SIGN UP屏幕时,即使在关闭窗口(浮动模式)后,它仍然保持在SIGN UP屏幕上。所以我试图设置变量signuptoggle回到假每当关闭模态窗口。
你可以发布你的控制器代码吗? – Dan
控制器是空的。 –