angularjs – 链接函数中的Angular $compile给出错误“RangeErro
发布时间:2020-12-17 07:09:33 所属栏目:安全 来源:网络整理
导读:我试图从链接函数添加一个ng-class属性到自定义指令.但是在添加ng-class属性后使用编译功能时,会抛出类似“RangeError:超出最大调用堆栈大
我试图从链接函数添加一个ng-class属性到自定义指令.但是在添加ng-class属性后使用编译功能时,会抛出类似“RangeError:超出最大调用堆栈大小”的错误
请参阅下面的代码 MyApp.directive('twinField',function($compile){ return { restrict:'A',require:'ngModel',scope:{ fval:'=' },link:function(scope,ele,attr,ctrl){ ctrl.$validators.compareTo=function(val){ //alert(scope.fval) return scope.fval==val } scope.$watch('fval',function(newValue,oldValue,scope) { ctrl.$validate() }); ele.attr("ng-class","addForm.cpassword.$error.compareTo?'errorpswd':''")//="" $compile(ele)(scope); } } }) 当我直接在html中添加ng-class时它正在工作. 解决方法
$编译(ELE)(范围);编译指令元素中的行,这将导致在无限循环中调用编译指令代码,这就是它给出“RangeError:超出最大调用堆栈大小”错误的原因.
理想情况下,您应该结合使用编译和链接功能.从编译功能,您需要添加ng-class属性&然后删除指令属性以避免指令元素无限编译.然后使用指令链接函数的范围编译指令元素. 码 myApp.directive('twinField',function($compile) { return { restrict: 'A',require: 'ngModel',scope: { fval: '=' },compile: function(tElement,tAttrs) { console.log(tElement) tElement.removeAttr('twin-field'); return function(scope,ctrl) { ele.attr("ng-class","addForm.cpassword.$error.compareTo?'errorpswd':''"); ele.attr("test","{{test}}':''"); var compileFn = $compile(ele); ctrl.$validators.compareTo = function(val) { //alert(scope.fval) return scope.fval == val } scope.$watch('fval',scope) { ctrl.$validate() }); compileFn(scope); } } } }) Similar answer Demo here 但另一方面,我认为使用ng-class指令添加和删除类的代码没有任何优势.当您设置表单控件的有效性时,隐式地您正在添加和删除ng-valid-compare-to(on valid)& ng-invalid-compare-to(on invalid)class.因此,没有必要创建额外的开销来让ng-class逻辑再次放置相同的东西. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |