1. 程式人生 > >angularjs自定義指令

angularjs自定義指令

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);
                        });
                });
            }
    };

});

用於檢測使用者名稱唯一的指令