在 angular js 指令中使用 jquery 的正确方法是什么？

Question

我已经使用 jQuery 开发了 angular 指令的代码，但我不确定在指令中使用 jQuery 是否正确。

当然可能还有其他方法，但我不知道。 任何人都可以指导我正确的方法或给我改进建议以在该指令中开发指令和用户 jQuery，如果我使用 jQuery 验证插件来执行 angular js 表单的验证，我做错了吗？

希望有一些指导方针和改进的建议。

谢谢...

指示：

    (function(){
        'use strict';
        angular
        .module("App")
        .directive("signInPopup",function(){
            return {
                templateUrl: "/views/auth/signin.html",
                restrict: 'E',
                controller: function(){
                    console.log("signin controller called");
                },
                scope: '=',
                replace: true,
                compile: function(element, attrs){
                    return {
                        pre: function(scope, element, attrs){
                            $(".popup-modal").magnificPopup({
                                type : 'inline',
                                preloader : true,
                                // focus: '#username',
                                modal : true,
                                callbacks : {
                                    beforeClose : function(e) {
                                        console.log("jquery called in before close");
                                    }
                                }
                            });
                            $(".tab_content").hide();
                            $(".tab_content:first").show();
                            $("ul.tabs li").click(function() {
                                $("ul.tabs li").removeClass("active");
                                $(this).addClass("active");
                                $(".tab_content").hide();
                                var activeTab = $(this).attr("rel");
                                $("#" + activeTab).fadeIn();
                            });
                            $('.tabs-container li a').click(function() {
                                $('.tabs-container li a ').removeClass('active');
                                $(this).addClass('active');
                            });

                            $("#frmSignup").validate({
                                wrapper: 'div',
                                rules:{
                                    txtFullname: {
                                        required: true,
                                        maxlength: 50
                                    },
                                    txtNickname: {
                                        required: true,
                                        maxlength: 25
                                    },
                                    txtEmail: {
                                        required: true,
                                        email: true,
                                        maxlength: 150,
                                        remote: {
                                            url: "/api/user/checkEmail",
                                            type: "post",
                                            data: {
                                              email: function() {
                                                return $( "#txtEmail" ).val();
                                              }
                                            }
                                        }
                                    },
                                    txtPassword:{
                                        required: true,
                                        minlength: 8,
                                        pattern:'//'
                                    },
                                    txtConfirmPassword:{
                                        required: true,
                                        equalTo: 'txtPassword'
                                    },
                                    chkTermsAndConditions:{
                                        required: true
                                    }
                                },
                                messages:{
                                    txtFullname:{
                                        required: 'Fullname is required',
                                        maxlength: 'Maximum 50 characters length exceed'
                                    },
                                    txtNickname: {
                                        required: 'Nickname is required',
                                        maxlength: 'Maximum 25 characters length exceed'
                                    },
                                    txtEmail: {
                                        required: 'Email is required',
                                        email: 'Email is invalid',
                                        maxlength: 'Email length exceed to maximum 150 characters'
                                    },
                                    txtPassword:{
                                        required: 'Password is required',
                                        minlength: 'Password minimum length must be 8 characters'
                                    },
                                    txtConfirmPassword:{
                                        required: 'Confirm password is required',
                                        equalTo: 'Confirm password must same as password'
                                    },
                                    chkTermsAndConditions:{
                                        required: 'You must accept terms and conditions'
                                    }
                                }
                            });
                        },
                        post: function(scope, element, attrs){}
                    }
                },
                link: function(scope, element, attrs){
                }
            }
        });

    }());

登录.html

<div id='signup-modal' class='login-popup login-popup-new mfp-hide'>
<div class='tabs-container'>
    <ul class='tabs-frame tabs'>
        <li class='active' rel='tab1'>
            <a id='sign_in_tab' class='first reset_frm active' href='javascript:void(0)' class='active first'>Signin</a>
        </li>
         <li rel='tab2'>
            <a id='sign_in_tab' class='reset_frm' href='javascript:void(0)' class=''>Signup</a>
        </li>
         <li rel='tab3'>
            <a id='sign_in_tab' class='reset_frm' href='javascript:void(0)' class=''>Forgot password</a>
        </li>
    </ul>
    <div class='tabs-frame-content tab_content' id='tab2' ng-controller='SignupCtrl'>
        <div id='user_signup'>
            <form name='frmSignup' id='frmSignup' ng-click="doRegistration(frmSignup.$valid)" autocomplete='off' name='frmSignup' novalidate>
                <div class='content'>
                    <label class='formlabel1'>Fullname</label>
                    <input type='text' name='txtFullname' id='txtFullname' class='inputbox inputbox_width' ng-model='user.txtFullname' ng-required='true'/>

                    <label class='formlabel1'>Nickname</label>
                    <input type='text' name='txtNickname' id='txtNickname' class='inputbox inputbox_width' ng-model='user.txtNickname'  ng-required`='true'/>

                    <label class='formlabel1'>Email</label>
                    <input type='email' name='txtEmail' id='txtEmail' class='inputbox inputbox_width' ng-model='user.txtEmail'  ng-required='true'/>

                    <label class='formlabel1'>Password</label>
                    <input type='text' name='txtPassword' id='txtPassword' class='inputbox inputbox_width' ng-model='user.txtPassword'  ng-required='true'/>

                    <label class='formlabel1'>Cofirm password</label>
                    <input type='text' name='txtConfirmPassword' id='txtConfirmPassword' class='inputbox inputbox_width' ng-model='user.txtConfirmPassword'  ng-required='true'/>

                    <div class='chkbox_signup'>
                        <input type='checkbox' id='chkTermsAndConditions' name='chkTermsAndConditions' ng-model='chkTermsAndConditions' value='1' ng-model='user.chkTermsAndConditions'  ng-required='true'/>

                        <label for='User_terms_condition' class='checkbox font-weight-normal'>
                        &nbsp;I read&nbsp;<a target='_blank' href='/'>terms &amp; conditions</a>&nbsp;and&nbsp;<a target='_blank' href='/'>privacy policies</a>&nbsp;carefully.
                        </label>
                    </div>
                </div>

                <div class="actions button-groups login-button-space">
                    <input type='button' value='Cancel' name='btnCancel' id='btnCancel' class='popup-modal-dismiss submit-btn button pull-right sp1' ng-model='user.btnCancel'/>
                    <input type='submit' name='btnRegister' id='btnRegister' class='submit-btn button pull-right sp1' value='Register' ng-model='user.btnRegister'  />
                    <div class='clearfix'></div>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

如果您需要使用jQuery ，那么请确保在 AngularJS 之前已经引用了 jQuery 库。

这是避免 AngularJS 使用jqLite必要步骤。

完成后，您可以使用以下任何一种语法来使用 jQuery -：

HTML：

<div class="customClass"></div>

JS：

1.

  $('.customClass')

2.

  jQuery('.customClass')

3.

  var $j = jQuery.noConflict();
    $j('.customClass');

4.

 angular.element('.customClass');

前三个是jQuery方式，第四个是 AngularJS 方式。

Answer 2

我知道我有类似的问题，但没有得到直接的答案。 看看这里。 可能有点帮助。

https://egghead.io/lessons/angularjs-application-wiring-jquery-vs-angularjs

如果您打算使用 Angular，最好是采用 Angular 的方式，如果 Angular 提供类似的功能，则避免使用 jQuery。