一些angular的指令

//如果在表格中文本过长,就会占据太大的空间,该指令能设定文本占的最大宽度,超出的部分用...代替,鼠标放上去等一会会显示全部内容
app.directive("shortInfo",[function() {
    return {
        restrict: "E",
        scope: {

            //驼峰规则,widthPx最大宽度,text显示的文本
            widthPx: "@",
            text: "@"
        },
        template : '<p style="width:{{widthPx}};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{text}}">{{text}}</p>'
    }
}]);

//使用指令的样式             属性名使用了驼峰规则,在html文件中不管是标签名还是属性名都要用xxx-xx的样式: 
 <td  data-title="'名称'" sortable="'name'"><short-info text="{{x.name}}" width-px="20px"></short-info></td>

//完整的html+css
<td data-title="'命令'" ><span style="width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{x.command}}" >{{x.command}}</span></td>


//*****************************************************************************************
//状态标签,过滤器cicdtrans和cicdstatus需要事先写好;
app.directive("myLabel",[function() {
    return {
        restrict: "E",
        scope: {
            text: "@",
        },
        template: '<span ng-bind="text|cicdtrans" class="label label-{{text|cicdstatus}}"></span>'
    }
}])

//使用
    <td data-title="'状态'" sortable="'status'"><my-label text="{{x.status}}"></my-label></td>



    //*****************************************************************************************
    
    //指令: 一个增加的加号+按钮,一个减少的×号按钮
    // 标签三条属性,form 父作用域的form
// index 所在数组的索引,
// name属性是form下面的数组名;
// 需要在父控制器中有 $scope.form.volumes = [];
//示例: <multiple-parameters name="volumes" form="form" index="$index"></multiple-parameters>
app.directive("multipleParame",["commonService",function(commonService){
    return{
        restrict:"E",
        scope:{
            form:'=',
            index: '=',
        },
        template:'<button type="button" class="btn btn-primary margin-right-5" ng-click="addP()"><i class="fa fa-plus"></i></button>'
                + '<button type="button" class="btn btn-primary" ng-click="delP(form[name][index])"  ng-if="form[name].length>1 || (form[name].length==1&&checkParameter(form[name][index]))"><i class="fa fa-remove"></i></button>',
        link:function(scope,element,attrs,ctrl){
            var name = attrs.name;
            scope.name = name;
            scope.index = attrs.index = scope.form[name].length-1;

            scope.addP = function () {
                scope.form[name].push({ id: commonService.uuid() });
            };

            scope.delP = function (x) {
                for (var i = 0; i < scope.form[name].length; i++) {
                    if (scope.form[name][i].id === x.id) {
                        scope.form[name].splice(i, 1);
                    }
                }
                if(scope.form[name].length==0){
                    scope.addP();
                }
            };

            scope.checkP = function(x){

                for (var i = 0; i < scope.form[name].length; i++) {
                    if (scope.form[name][i].id === x.id) {
                        for(_attr in scope.form[name][i]){
                            if(_attr != "id" && _attr !="$$hashKey"){
                                return true;
                            }
                        }
                        return false;
                    }
                }
            }
        }

    }
}]);

 

判断两个密码是否输入一直

app.directive('myPwdMatch', [function(){
     return {
         restrict: "A",
         //当require:'ngModel',时,link的第四个参数是 表单对象;
         require: 'ngModel',
         link: function(scope,element,attrs,ctrl){
             console.info("scope",scope);
             console.info("ctrl",ctrl);
             var tageCtrl = scope.$eval(attrs.myPwdMatch);
             //var aaa = attrs.myPwdMatch
             //  返回值是scope[aaa],因为一般情况下aaa = 'myForm.cpwd',所以如果要用[]来获取的话应该:
             /*
             var arr1 = aaa.split(".");
             function parse(scope,arr){
                for(var i = 0; i < arr.length; i++){
                    var str = arr[i]
                    var temp = scope[str]
                    return parse(temp);
                }
             }
             parse(scope,arr1);
            这样可以获取和var tageCtrl = scope.$eval(attrs.myPwdMatch)相同的结果
              */  
             //  ; scope.$eval(str),是获取scope上的属性str,对应的值;
             //用scope:{myPwdMatch:"="},双向数据绑定能达到相同的结果
             console.info("name",tageCtrl);
             //$parsers数组里面的函数都会被执行,参数为ng-model重读取到的值;数组会依次执行里面的函数
             //把上一个函数的返回值,作为下一个函数的参数,(管道模式),直到最后一个函数的返回值会赋值到ng-model
             //$formatters也是一个类似的数组主要用于格式化和转换,以便显示
             //$viewChangeListeners也是数组,当视图值改变时,函数回调用,没有参数,返回值会被忽略,用来执行与ng-model无关的其他函数;
             tageCtrl.$parsers.push(function(viewValue){
                 //$setValidity(错误的名称,bool)设置错误的标志,
                 ctrl.$setValidity('pwdmatch', viewValue == ctrl.$viewValue);
                 return viewValue;
             });
             ctrl.$parsers.push(function(viewValue){
                 if(viewValue == tageCtrl.$viewValue){
                     ctrl.$setValidity('pwdmatch', true);
                     return viewValue;
                 } else{
                     ctrl.$setValidity('pwdmatch', false);
                     return undefined;
                 }
             });
         }
     };
 }]);



//显示提示内容的指令
app.directive("helpBlock",[function(){
    return{
        restrict: "E",
        template: function(element,attrs){
            var _html = "";
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$error.checkasync">命名重复</span>';
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$error.minlength">内容太短</span>';
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$dirty &&' + attrs.target + '.$error.required">不能为空</span>';
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$error.pattern">' + attrs.patternText + '</span>';
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$error.pwdmatch">两次密码不一致</span>';
            _html += '<span class="error text-small block" ng-if="' + attrs.target + '.$invalid &&'+ attrs.target + '.$dirty &&'+!!attrs.text+'">' + attrs.text + '</span>';
            return _html;
        }
    };
}]);



//判断两次密码输入是否相同的html
    
<div class="form-group" ng-class="{'has-error':myForm.password.$dirty && myForm.password.$invalid, 'has-success':myForm.password.$valid}">
    <label>
        密码 <span class="symbol required"></span>
    </label>
    <input type="hidden">
    <input type="password" class="form-control"  name="password" ng-model="form.password" autocomplete="off"
            required maxlength="20" ng-minlength="4" add-place-holder=""/>
    <help-block target="myForm.password"></help-block>
</div>
<div class="form-group" ng-class="{'has-error':myForm.cpassword.$dirty && myForm.cpassword.$invalid, 'has-success':myForm.cpassword.$valid}">
    <label>
        再输一次 <span class="symbol required"></span>
    </label>
    <input type="password" class="form-control"  name="cpassword" ng-model="form.cpassword" autocomplete="off"
            required maxlength="20" ng-minlength="4" my-pwd-match="myForm.password" add-place-holder=""/>
    <help-block target="myForm.cpassword"></help-block>
</div>