我已经使用jQuery开发了angular directive的代码，但是我不相信这是在指令中使用jQuery的正确方法。
当然可能还有其他方法，但我不知道。任何人都可以指导我正确的方法或给我改进建议在这个指令中开发指令和用户jQuery，如果我使用jQuery验证插件来执行角度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){
}
}
});
}());
<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'>
I read <a target='_blank' href='/'>terms & conditions</a> and <a target='_blank' href='/'>privacy policies</a> 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>
答案 0 :(得分：1)
如果您需要使用jQuery，那么请确保之前引用的jQuery库比AngularJS的引用好。
这是避免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方式。
答案 1 :(得分：0)
我知道我有类似的问题并没有得到正确答案。看看这里。可能会有所帮助。
https://egghead.io/lessons/angularjs-application-wiring-jquery-vs-angularjs
如果您计划最好使用Angular，那么如果Angular提供类似的功能，则采用Angular方式并避免使用jQuery。