在我的情况下,从指令更改范围变量

时间:2016-01-13 19:42:27

标签: jquery angularjs angularjs-directive

所以我无法弄清楚如何从指令中更改范围变量。

我想在动画结束时将变量 signuptoggle 设置回FALSE,因此每次按下LOGIN按钮/链接时,它都会加载第一个LOGIN屏幕。

指令模板:

<!-- 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)来处理动画。

我使用 ng-click 更改变量 signuptoggle ng-show 的值以监控 signuptoggle 变量以便显示DIV。

问题是,当我单击“登录”以打开“登录”屏幕并切换到“注册”屏幕时,即使关闭窗口(浮动模式),它也会保持在“注册”屏幕上。因此,每当关闭模态窗口时,我都会尝试将变量 signuptoggle 设置为false。

1 个答案:

答案 0 :(得分:0)

解决。我改变了改变屏幕的方式以使用控制器。