angularjs自定义指令

来源：互联网发布：剑灵朱丽叶数据编辑：程序博客网时间：2024/05/22 00:29

app.directive('nameunique', function($http) {
   return {
           require: 'ngModel',//require代表另一个指令的名字，它将会作为link函数的第四个参数
           //参数说明 scope:指令需要监听的作用域,ele:指令所在的元素,attrs:有声明在当前元素上的属性列表,ngmodelController:控制器实例，也就是当前指令通过require请求的指令内部的controller
           link: function(scope, ele, attrs, ngmodelController) {
               scope.$watch(attrs.ngModel, function(n) {//n为监控的值，此处就是attrs.ngModel
                   if(!n){
                       return;
                       }
                   $http({
                       method: 'POST',
                       url: 'url',
                       data: 'name='+ $('#name').val(),
                       headers : {
                           'Content-Type' : ''
                       }
                       }).success(function(data) {
                           if(data.data.length==0){
                                   ngmodelController.$setValidity('nameunique', true);
                               }
                           else{
                               //已存在用户名，$invalid为true
                               ngmodelController.$setValidity('nameunique', false);
                           }
                       }).error(function(data) {
                           ngmodelController.$setValidity('nameunique', false);
                       });
               });
           }
   };

});

用于检测用户名唯一的指令

0 0