一些angular的指令

//如果在表格中文本过长,就会占据太大的空间,该指令能设定文本占的最大宽度,超出的部分用...代替,鼠标放上去等一会会显示全部内容
app.directive("shortInfo",[function() {return {restrict: "E",scope: {//驼峰规则,widthPx最大宽度,text显示的文本widthPx: "@",text: "@"},template : '
{{text}}
'}
}]);//使用指令的样式             属性名使用了驼峰规则,在html文件中不管是标签名还是属性名都要用xxx-xx的样式: <short-info text="{{x.name}}" width-px="20px">//完整的html+css
{{x.command}}//*****************************************************************************************
//状态标签,过滤器cicdtrans和cicdstatus需要事先写好;
app.directive("myLabel",[function() {return {restrict: "E",scope: {text: "@",},template: ''}
}])//使用//*****************************************************************************************//指令: 一个增加的加号+按钮,一个减少的×号按钮// 标签三条属性,form 父作用域的form
// index 所在数组的索引,
// name属性是form下面的数组名;
// 需要在父控制器中有 $scope.form.volumes = [];
//示例: 
app.directive("multipleParame",["commonService",function(commonService){return{restrict:"E",scope:{form:'=',index: '=',},template:''+ '',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 += '命名重复';_html += '内容太短';_html += '不能为空';_html += '' + attrs.patternText + '';_html += '两次密码不一致';_html += '' + attrs.text + '';return _html;}};
}]);//判断两次密码输入是否相同的html密码 required maxlength="20" ng-minlength="4" add-place-holder=""/>

再输一次 required maxlength="20" ng-minlength="4" my-pwd-match="myForm.password" add-place-holder=""/>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！