I have been developed code of angular directive with jQuery but I am not confident that is it proper way to use jQuery in directive or not.
Definitely there may be another ways but I don't know. can anyone guide me about proper way or give me improvement suggestion of to develop directive and user jQuery in this directive and am I doing wrong if I used jQuery validate plug-in to perform validation of angular js form.?
Hope for some guidelines and improved suggestions.
Thank you...
directive:
(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){
}
}
});
}());
Signin.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'>
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>
