That’s it, I want to create something for login, but I’m stuck on the custom command.
Login requires an account input box and a password input box.
Because it needs to be compatible with IE8, the PLACEHOLDER attribute cannot be used directly. Need to use custom instructions to complete.
The account can be a mobile phone, an email, or an ordinary account.
The email address needs to automatically generate a suffix, so custom instructions are also required. You can set whether to display the email prompt after entering @.
The account needs to be verified by itself, which requires the introduction of custom instructions to write verification (the method seen on the angular official website, custom validator).
Now I need to use multiple custom instructions to complete this thing (if you have a better way, you can also use this, please tell me, thank you).
My idea is to first define a custom instruction so that its PLACEHOLDER can be displayed when needed. Then define an EMAIL command on this basis. When the account number is entered, various domain name suffixes are automatically added to it for selection. Finally, on this basis, define a PASSPORT command to determine whether the currently entered content is an available account (mobile phone/email/common user name).
But here comes the problem. If you want to use multiple such custom instructions in the same scope, the instructions must be in separate scopes. However, there is no way to set separate scopes for these three layers of custom instructions. , an error will be reported. If you want to separate each of these instructions, you can think of using ng-repeat, but the class generated by ng-repeat cannot be automatically compiled into normal instructions after generation...
I know what I said is a bit confusing. If you have other good ideas, please share them. Thank you. Finally, the code...
Main file
<body ng-app="Main">
<form novalidate name="LoginForm">
<p ng-form class="dir-text-placeholder dir-text-email dir-text-passport"
ng-init="needAt=true;
name='user_passport';
id='user_passport';
placeholder='用户名/邮箱/手机';">
</p>
</form>
</body>angular.module('Main', [])
.directive('dirTextPlaceholder', [function () {
return {
restrict: 'C',
priority:111,
controller:function(){
console.info('in textPlaceholder')
},
link: function (scope, iElement, iAttrs) {
var input=iElement.find('input').eq(0);
scope.$watch("value",function(newValue,oldValue){
if(!!newValue && !oldValue)
input.addClass("chi-full").removeClass("chi-empty");
else if(!newValue && !!oldValue)
input.addClass("chi-empty").removeClass("chi-full");
});
},
templateUrl:"text-placeholder.html"
};
}])
.directive('dirTextEmail', ['$compile','$timeout',function ($compile,$timeout) {
var hosts='126.com|163.com|qq.com|sina.com|yeah.net'.split('|');
return {
restrict: 'C',
priority:11,
require: '?dirTextPlaceholder',
controller:function(){
console.info('in textEmail')
},
link: function (scope, iElement, iAttrs) {
iElement.append("<ul></ul>")
var input=iElement.find('input').eq(0),
ul=iElement.find('ul').eq(0),
li=angular.element('<li ng-repeat="email in emails | filter:host" ng-click="setEmail(email)">{{email}}</li>');
$compile(li)(scope);
ul.append(li);
scope.$watch("value",function(newValue){
if(newValue===undefined) return false;
var indexAt=newValue.indexOf('@');
if(scope.needAt && !~indexAt) return false;
scope.host=newValue.substring(indexAt);
var passport=newValue.substring(0,indexAt);
var emails=[];
for(var n=0;n<hosts.length;n++) emails.push(passport+'@'+hosts[n]);
scope.emails=emails;
emails=null;
$timeout(function(){
if(ul.children().length==1 && ul.children().eq(0).html()==newValue)
ul.hide();
else ul.show();
});
});
scope.setEmail=function(email){
scope.value=email;
}
}
};
}])
.directive('dirTextPassport', ['$rootScope',function ($rootScope) {
return {
restrict: 'C',
priority:1,
require: '?dirTextEmail',
controller: function(){
console.info('in textPassport')
},
link: function (scope, iElement, iAttrs) {
var ptr=/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}|(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7}$/,
input=iElement.find('input').eq(0),
controller=angular.element(iElement).scope();
console.log($rootScope)
//写到这儿的时候，想起来，账号跟密码要放在同一个作用域下，
//所以第一个指令不采用分离作用域是不行的，但是分离之后，
//后续的跟它作用在同一DOM上的其它指令又不能再用分离作用域，我就不会了……
}
};
}])Template file text-placeholder.html
<input type="{{type}}" name="{{name}}" id="{{id}}" ng-model="value" autocomplete="off">
<label for="{{id}}">{{placeholder}}</label>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a solution for IE8 placeholder compatibility.
Personally, I don’t recommend that you write instructions to complete your needs. The logic is too confusing. It does not mean that the highlight of angular is instructions, and instructions must be exported. It is just a login interface, and the verification logic can be written to the controller. If you get instructions to write it, the amount of code will at least double, and the readability will not be good.
Have abandoned school^^^