Itu sahaja, saya ingin mencipta sesuatu untuk log masuk, tetapi saya terperangkap pada arahan tersuai.
Log masuk memerlukan kotak input akaun dan kotak input kata laluan.
Oleh kerana ia perlu serasi dengan IE8, atribut PLACEHOLDER tidak boleh digunakan secara langsung. Perlu menggunakan arahan tersuai untuk melengkapkan.
Akaun boleh menjadi telefon mudah alih, e-mel atau akaun biasa.
Alamat e-mel perlu menjana akhiran secara automatik, jadi arahan tersuai juga diperlukan. Anda boleh menetapkan sama ada untuk memaparkan gesaan e-mel selepas memasukkan @.
Akaun perlu disahkan dengan sendirinya, yang memerlukan pengenalan arahan tersuai untuk menulis pengesahan (kaedah yang dilihat pada laman web rasmi sudut, pengesah tersuai).
Sekarang saya perlu menggunakan berbilang arahan tersuai untuk menyelesaikan perkara ini (jika anda mempunyai cara yang lebih baik, anda juga boleh menggunakan ini, sila beritahu saya, terima kasih).
Idea saya ialah untuk mentakrifkan arahan tersuai terlebih dahulu supaya PEMEGANG TEMPATnya boleh dipaparkan apabila diperlukan. Kemudian tentukan perintah EMAIL atas dasar ini Apabila nombor akaun dimasukkan, pelbagai akhiran nama domain ditambahkan padanya secara automatik untuk dipilih. Akhir sekali, atas dasar ini, tentukan arahan PASPORT untuk menentukan sama ada kandungan yang dimasukkan pada masa ini ialah akaun yang tersedia (telefon bimbit/e-mel/nama pengguna biasa).
Tetapi inilah masalahnya Jika anda ingin menggunakan berbilang arahan tersuai dalam skop yang sama, arahan tersebut mestilah dalam skop yang berasingan Walau bagaimanapun, tiada cara untuk menetapkan skop yang berasingan untuk tiga lapisan arahan tersuai ini. ralat akan dilaporkan. Jika anda ingin mengasingkan setiap arahan ini, anda boleh memikirkan untuk menggunakan ng-repeat, tetapi kelas yang dijana oleh ng-repeat tidak boleh disusun secara automatik ke dalam arahan biasa selepas generasi...
Saya tahu apa yang saya katakan agak mengelirukan. Jika anda mempunyai idea yang baik, sila kongsikan. Akhirnya, kod...
Fail utama
<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上的其它指令又不能再用分离作用域，我就不会了……
}
};
}])Templat fail text-placeholder.html
<input type="{{type}}" name="{{name}}" id="{{id}}" ng-model="value" autocomplete="off">
<label for="{{id}}">{{placeholder}}</label>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini ialah penyelesaian untuk keserasian pemegang tempat IE8.
Saya secara peribadi tidak mengesyorkan anda menulis arahan untuk melengkapkan keperluan anda, logiknya terlalu mengelirukan. Ia tidak bermakna bahawa kemuncak sudut ialah arahan, dan arahan mesti dieksport. Ia hanyalah antara muka log masuk, dan logik pengesahan boleh ditulis kepada pengawal Jika anda mendapat arahan untuk menulisnya, jumlah kod akan sekurang-kurangnya dua kali ganda, dan kebolehbacaan tidak akan baik.
Sekolah terbengkalai^^^