取下然后追加AngularJS格式转换有效性状态 [英] Detach then append AngularJS form change validity status
问题描述
您可以在此的jsfiddle测试：这里（更好的是看到新的jsfiddle，请参阅<强>修改这个帖子的一部分）
You can test it in this jsFiddle: HERE (better is to see on new jsFiddle, see EDIT part of this post)
我觉得这是在AngularJS一个bug，或者至少不是预期的结果。
如果我分离形式，然后重新添加它，它是类 NG-无效开关置于 NG-有效上重其追加到DOM。这对结果，使形式的提交按钮偶数数据是无效的。
当然，我期待的有效性状态没有切换。
I think there is a bug in AngularJS or at least not an expected result.
If i detach a form then re-append it, it's class ng-invalid switch to ng-valid on re-append it to the DOM. This has for consequence to enable the submit button of the form even data aren't valid.
Of course, i was expecting that validity status didn't switch.
我认为这是一个错误的角度，但也许一个jQuery之一。
我可以使用jQuery检查追加，如果形式是有效还是无效，然后迫使窗体类，但它似乎没有发挥有效的形式获得则无效状态。这是很奇怪的，因为我不知道任何其他的解决办法，而无需使用一种数据存储状态的形式分离之前。
I think it's a angular bug, but maybe a jquery one. I could use jquery to check on append if form was valid or not and then forcing form class but it's seems not working as a valid form get then the status of invalid. It's quite weird as i don't know any other workaround without using kind of data to saved status form before detaching it.
因此，任何人已经遇到过这个问题吗？
有没有什么方法（如果可以使用AngularJS指令）摆脱这种错误的？
So anyone has already encountered this problem? Is there any method (if possible using AngularJS directive) to get rid of this bug?
PS：我需要分离的形式（以及任何其他元素）的单个页面的Web应用程序，以保持DOM尽可能干净
PS: i need to detach form (and any other elements) in a single page web application to keep DOM as clean as possible.
修改
我所做的就是更说明我的问题了新的jsfiddle，拆卸内部网站导航内容：的http：// jsfiddle.net/EWVwa/
I've done a new jsFiddle that is illustrating more my problem, detaching content on internal site navigation: http://jsfiddle.net/EWVwa/
更新
我来这个临时解决方案（感谢CaioToOn）
I come to this temporary solution (thanks to CaioToOn)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.directive('customValidation', function() {
return {
require: ['ngModel', '^?form'],
link: function(scope, element, attr, ctrls) {
console.log(ctrls);
var ngModelCtrl = ctrls[0],
formCtrl = ctrls[1];
ngModelCtrl.$parsers.push(function(viewValue) {
if (viewValue === 'test') {
ngModelCtrl.$setValidity('name', true);
formCtrl.$setValidity('name', true);
return viewValue;
} else {
ngModelCtrl.$setValidity('name', false);
formCtrl.$setValidity('name', false);
return undefined;
}
});
// custom event
element.bind('$append', function() {
formCtrl && formCtrl.$addControl(ngModelCtrl);
/*** TEST for to keep form's validation status ***/
formCtrl.$setValidity('name', ngModelCtrl.$valid);
//ngModelCtrl.$setValidity('name', ngModelCtrl.$valid);
console.log(formCtrl.$valid);
});
//binding on element, not scope.
element.bind('$destroy', function() {
console.log("gone haven");
});
}
};
});
这需要更多的测试对于多个输入验证。我一定会更新的答案时，所有测试将完成。
This need more testing regarding multiple inputs validation. I'll certainly updating answer when all tests will be done.
推荐答案
这个问题是因为输入指令的当元素从DOM删除删除自己从表单控件。由于它不会链接你的 ngModel 和表单控制器再次，您的输入未通过形式考虑了。
The problem happens because input directive removes itself from the form controls when the element is removed from DOM. As it doesn't link your ngModel and form controller again, your input is not being considered by the form anymore.
您主要有<击>两个三个选项：
- 变元件的知名度，而不是删除它
- （preFER下一个）<击>露出了重新链接功能，将它重新添加到原来的形式
- 在所有控件触发一个自定义事件，使他们能够重新链接过问
更改元素的知名度意味着你将有DOMTree不必要的DOM元素。这是不是很糟糕，因为你遵守了$编译元素的引用，无论如何，所以它会还参加 $消化周期和DOM的修改。
Changing element visibility means you will have unnecessary DOM elements in DOMTree. This is not quite bad, as you are keeping a reference to the $compile element anyway, so it will yet participate the $digest cycles and "DOM" modifications.
（思考了一会儿后，新的解决方案是比这个稍微好一点，所以不公开重新链接功能） <击>揭露一个重链接功能 是相当奇怪的（虽然功能），这还不是最可靠的解决方案。一种方法来实现它包括在需要形式的控制器（要求：ngModel'，'^形式？'] ）和绑定重新链接功能元素的数据：
(After thinking for a while, the new solution is slightly better than this one, so don't expose a relinking function) Exposing a relink function is quite weird (although functional) and this is not the most reliable of the solutions. One way to achieve it consists in requiring form controller (require: ['ngModel', '^?form']) and binding a relinking function to the element's data:
element.data('relink', function(){
formCtrl && formCtrl.$addControl(ngModelCtrl);
});
当你再次元素添加到屏幕上，你不得不调用所有控件重新链接功能：
And when you add the element to the screen again, you gonna have to call all your controls relink function:
$('.controls').data('relink')();
看到一个例子 rel=\"nofollow\">。
See a example here.
这不是很可靠，但对你的情况可能会奏效。
It's not quite reliable, but might work for your case.
触发一个自定义事件为pretty大致相同的previous，但你会在应该重新链接过问所有元素调度自定义事件。这是方式更有条理，但仍不太可靠，因为形式等各个环节也可能被打破（再次，应sufice你的情况）。基本上听的自定义事件上的指令：
Triggering a custom event is pretty much the same as the previous, but you would dispatch a custom event on all elements that should relink theirselves. This is way more organized, but still not quite reliable, because the form and other links might also have been broken (again, should sufice your case). Basically listen to the custom event on your directive:
element.bind('$append', function(){
formCtrl && formCtrl.$addControl(ngModelCtrl);
});
和改变的形式后，就触发所有控件的自定义事件：
And after changing to the form, just trigger the custom event on all controls:
$('.control').triggerHandler('$append');
之所以这样，一个是更好的是，该指令还决定何时重新链接的组件，该事件是一种通用。 这里是一个工作plunker 。
作为最后的努力，你可以覆盖 jQuery.fn.append ，并在所有元素孩子递归触发自定义事件（这是什么样的角确实删除元素时）。这是最有组织的，但它会在所有冲击力yoour性能追加来电。
As a last effort, you could override jQuery.fn.append and trigger the custom event on all element children recursively (this is what Angular does when removing elements). This is the most organized, but it would impact yoour performance on ALL append calls.
这篇关于取下然后追加AngularJS格式转换有效性状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
