Ça y est, je veux créer quelque chose pour la connexion, mais je suis bloqué sur la commande personnalisée.
La connexion nécessite une zone de saisie de compte et une zone de saisie de mot de passe.
Comme il doit être compatible avec IE8, l'attribut PLACEHOLDER ne peut pas être utilisé directement. Besoin d'utiliser des instructions personnalisées pour terminer.
Le compte peut être un téléphone mobile, un e-mail ou un compte ordinaire.
L'e-mail doit générer automatiquement un suffixe, des instructions personnalisées sont donc également nécessaires. Vous pouvez définir si vous devez afficher l'invite de courrier électronique après avoir saisi @.
Le compte doit être vérifié par lui-même, ce qui nécessite l'introduction d'instructions personnalisées pour écrire la vérification (la méthode vue sur le site officiel angulaire, validateur personnalisé).
Maintenant, je dois utiliser plusieurs instructions personnalisées pour terminer cette chose (si vous avez un meilleur moyen, vous pouvez également l'utiliser, dites-le-moi, merci).
Mon idée est de définir d'abord une instruction personnalisée afin que son PLACEHOLDER puisse être affiché en cas de besoin. Définissez ensuite une commande EMAIL sur cette base. Lorsque le numéro de compte est saisi, différents suffixes de nom de domaine y sont automatiquement ajoutés pour la sélection. Enfin, sur cette base, définissez une commande PASSPORT pour déterminer si le contenu actuellement saisi est un compte disponible (téléphone portable/email/nom d'utilisateur commun).
Mais voici le problème. Si vous souhaitez utiliser plusieurs de ces instructions personnalisées dans la même portée, les instructions doivent être dans des portées distinctes. Cependant, il n'y a aucun moyen de définir des portées distinctes pour ces trois couches d'instructions personnalisées. une erreur sera signalée. Si vous souhaitez séparer chacune de ces instructions, vous pouvez penser à utiliser ng-repeat, mais la classe générée par ng-repeat ne peut pas être automatiquement compilée en instructions normales après génération...
Je sais que ce que j'ai dit est un peu déroutant. Si vous avez d'autres bonnes idées, partagez-les. Merci. Enfin, le code...
Fichier principal
<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上的其它指令又不能再用分离作用域，我就不会了……
}
};
}])Fichier modèle text-placeholder.html
<input type="{{type}}" name="{{name}}" id="{{id}}" ng-model="value" autocomplete="off">
<label for="{{id}}">{{placeholder}}</label>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il s'agit d'une solution pour la compatibilité des espaces réservés IE8.
Personnellement, je ne vous recommande pas d'écrire des instructions pour répondre à vos besoins, la logique est trop déroutante. Cela ne signifie pas que le point culminant d'Angular sont les instructions, et les instructions doivent être exportées. Il ne s'agit que d'une interface de connexion et la logique de vérification peut être écrite sur le contrôleur. Si vous recevez des instructions pour l'écrire, la quantité de code doublera au moins et la lisibilité ne sera pas bonne.
École abandonnée^^^