• 一些angular的指令


    //如果在表格中文本过长,就会占据太大的空间,该指令能设定文本占的最大宽度,超出的部分用...代替,鼠标放上去等一会会显示全部内容
    app.directive("shortInfo",[function() {
        return {
            restrict: "E",
            scope: {
    
                //驼峰规则,widthPx最大宽度,text显示的文本
                widthPx: "@",
                text: "@"
            },
            template : '<p style="{{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="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>
  • 相关阅读:
    xpath 笔记
    实验四 决策树算法及应用
    实验三 朴素贝叶斯算法及应用
    机器学习 实验二 K-近邻算法及应用
    实验一 感知器及其应用
    JAVA学习路线
    实验三 面向对象分析与设计
    实验二 结构化分析与设计
    实验1:软件开发文档与工具的安装与使用
    ATM管理系统
  • 原文地址:https://www.cnblogs.com/bridge7839/p/6394984.html
Copyright © 2020-2023  润新知