-
Notifications
You must be signed in to change notification settings - Fork 6.7k
$modal breaks forms b/c of transclusion #969
Comments
Chris, I do exactly the same - have forms in my modals but I'm checking |
Just ran into the same issue here... wondering if it's a bug in angular 1.2.0-rc.2 |
I'll try to plunk/fiddle this in the next few days. |
Same issue here, I'm going to try create a spiked version of the new $modal that do not use ngTransclude. That's the cause of the creation of the 'unwanted' additional scope here. The scope that gets the validation injected is the one created by the transclusion, and it's a child of you modal controller's scope. |
OK, it seems I have two working patches for this: both of them do not use the ngTransclude directive in the template, they just insert the modal html content inside the template frame using angular DOM manipulation. My bro is testing them, if they work well (and if I find how to post patches) I'll upload them. |
This is the 'option 2' implementation: Sorry for the big bunch of code, but I don't know how to submit a patch properly atm. Update: fixed the code markdown
|
I've hit this issue as well. trying AGiorgetti's version now, seems to work. thanks ! |
Thanks for taking a look. |
This is really strange. I have several models with ng-model bindings and they all work fine. With 0.6 and NG 1.2 RC1 |
this plunk demonstrates my problem : http://plnkr.co/edit/A0Q8Nh?p=preview notice how the ng-change doesn't see the 'correct' value when typing in the form-field. I've tried various configurations, with and without passing a $scope to the modal instance, I haven't gotton it to work |
@georgiosd the ng-model bindings are working for me, but accessing the form by name from the scope (e.g. $scope.myForm) doesn't work. |
You guys are aware that this ENTIRE bug is just because there's a superfluous childscope being created right? In other words, if you had This is still a bug that should be addressed however, but again, it's just because there's 1 extra child scope being created for some reason. @AGiorgetti I believe giant pastes like that aren't really helpful in comments. |
Thnx for this comment @ProLoser :-) I will update this issue with more explanations on what is going on and work-arround later today. And yes, planning on fixing it as I understand that it might be confusing. Just still pondering different options. |
yes @ProLoser I know that, and I also said sorry in advance, I apologize again. Yes, that's the problem and it was spotted by @boneskull (the extra scope was created by the transclusion). The implementation I posted there get rid of the translusion and does not create the extra scope. It still need to be improved by using the template cache again for the modal frame (instead of inlining it as I did in the quick fix). |
I have similar issue. |
Is there anyone working on a fix? I'll admit that it is a bit dirty to inserting ng-style/ng-class styles directly into the dom, but @AGiorgetti code seems to do the trick. PS: Thinking about it some more, I do think that modal-dialog and modal-content should not be inserted by transclusion in directives, but should be part of the user template (i.e. templateUrl parameter in modal). So this is extra points for that solution. |
I found it hard to see what @AGiorgetti changed, so I made a fork. The change breaks some tests though: Chrome 30.0 (Linux) $modal option by option custom window classes should support additional window class as string FAILED With custom window class |
The fix does not work for me :-( At least not the backport to 0.6. The modal is not displayed at all. |
- delete directive modalWindow - ngTransclude not needed any more
How about the workaround? On Sep 23, 2013, at 5:30 AM, Bastian Voigt [email protected] wrote:
|
You don't have to use .$modelValue if you also set your
This way you access the form information at This all comes back to the correct use of scope inheritance in angular. Have a read of this: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html |
@matt-way , thanks so much! I learned a ton in this exercise: So it's all about the read before write when child scopes set up objects and write to them. By setting an object on the parent scope with the same name as the model, the (child scope) template form uses the parent's object by that same name to hang the form on, and in so doing one is able to fake the model back to the parent scope. Very clever. The Hoskins link above explains it very well. Thanks for the lesson! |
Can someone help me understand why this is so much worse than the effort it takes to understand and workaround the scope issue? |
Total cludge solution http://plnkr.co/edit/oiOuwSGcJDzkPBIdVURv?p=preview |
Clever solution @matt-way. I improved it further:
And it just works! I have got |
Tx @pgaertig your tip worked great for me! |
@AGiorgetti you closed this referencing #972, and then @pkozlowski-opensource closed it referencing #981 which I don't think it's related to this one and this one should be re-open. Am I wrong? 😓 |
Hi, i didn't close anything, the reference at #972 was made because the problem reported there (a typeahead malfunction inside a modal) was related to the issues caused by the use of transclusion in the modal dialog. As of now I'm using a custom made version of the modal dialog which does not use transclusion at all, I'm just doing it manually playing with the templates (as I did in the past with the 'patched' version posted above at the time). |
@AGiorgetti thanks! @pkozlowski-opensource coool! thanks a lot! |
boneskull thx for the brilliant workaround ! |
I'm still having the same issue... 0b31e86 hasn't been released yet? |
Ok, I've compiled the master version with grunt and now it works. Hope that ui-boostrap 0.12 will be released soon! |
I just want to confirm - After upgrading ui-bootstrap to 0.12 it works correctly! |
check it this plunker |
Make angular-ui#840 merge-ready
I was fighting over ng-model/ng-form myself this days. My problem was a bit different but also cased by the way scopes/controllers are handled. Basically I have a directive to watch from the parent form for changes and warn the user if he's about to leave the page without saving and that wasnt working if you only changed the modal's values. The workaround: In the parent controller inject your form modalInstance = $modal.open({
resolve: {
containerForm: function () {
return $scope.containerForm;
}
}
}); And in the modal's template set the parent form before any control has the chance to initialize <ng-form name="$parent.modalForm">
<any ng-init="$parent.modalForm.$$parentForm = containerForm"/> |
@solerman, I should point out that using Also, doing this with your form is not correct. You should be returning the model from the form in the modal as a result of the $promise from the modal and then, if needed, update your form's model with that data. |
The problem is, with bindings the model is already updated in the model. To do what you say I would need to clone the (very complex) model, provide it to the modal and then hand-copy all the values back. For every modal. |
@solerman, that sounds like an issue with design and UX rather than our library. do you need to send the entire model to the modal or can you just send the bit that the model intends to edit? For the record, this is a very common paradigm - say, having a grid of data and then editing a grid item in a modal. |
@icfantv the parent its a dashboard and the modal its just for a single dashboard item. There is a lot of stuff to configure in the item, I ain't sending the entire dashboard but just a single item. Think a bar chart, all the series, axis titles, colors, ranges, etc. |
@solerman, without knowing exactly what you're using the modal to configure, it's hard to make a recommendation. It sounds like you're using the modal to configure chart options, but that's just a guess. I can certainly appreciate not wanting to copy a "huge" model object. The only other options I can think of are:
I still think this boils down to a design and UX issue and not the library. We do get a lot of issues surrounding the use of parent forms wrapping "compartmentalized" forms (tabs, accordions, etc...). There are ways of working around our |
Say I instantiate a modal:
In my modal, I have a form:
Because of transclusion,
myForm
is not available onMyCtrl
's scope and I can't check for$valid
, for example. A workaround I've found is to simply put anng-controller="MyCtrl"
within my modal template itself, and do this:...and now I can get to the instance from within
MyCtrl
.This is not ideal, but I'm not sure of what the fix should be. Instead of transclusion, would it be a good idea to actually insert an
ngController
directive within thetemplate/modal/window.html
template itself then say,ngTransclude
within a child tag? Any better way to tackle this problem?thanks
Chris
The text was updated successfully, but these errors were encountered: