一些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>

 

转载于:https://www.cnblogs.com/bridge7839/p/6394984.html