I am using ng-repeat for iterating through a list of objects, and for each item in the list there are child objects which are edited in a Bootstrap modal popup. I am unable to use the Angular modal service as it conflicts with the Bootstrap CSS already in use on the page. Angular modals would let me take values back from the modal popup on modal close, but I am unable to use it due to existing code.
To work around this problem, I am passing the child object to the function that opens the modal popup. In this function, I assign this passed object to an Angular model/jQuery Object (say "x") (either way I tried, it gives same result) so that I can update this new object x with the changes done in the modal popup.
I believe that these variables as copied and points to the same object, when I update one, it should update the other one and so my original Angular model should be updated as well. But, to my surprise, the original model is not updating until I open the modal popup again. When I open the modal popup again, it does not update variable "x" but merely is updated with the ng-model I use on page.
To debug this further, I printed my ng-model on page and it is not updated till modal popup is opened again. To contrast this further if I alert length of this ng-model, it is updated (shows the changes I made in modal popup) but the ng-model object on page does not show new values.
I understand this is more of a theory and less code but I am not sure what part of my code would help find the problem. Kindly let me know and I will try sanitize my code and share.
Update:
While further digging, it looks like the model is updated but it did not reflect on page. So if for example on page I have condition that if no child objects, show Add button (edit otherwise), it does not change from add to edit button when I open modal first time and add values to child objects. When I open modal popup again, it changes link from add to edit even if I close modal popup without changes. So it is a problem with screen refreshing as such (my model updates reflecting on screen) instead of actual model update.
Related
I cannot figure out how to make a two-way-binding to an mddialog. Can anyone give me an example, where data passed to a mddialog is updated when it is updated in the original scope?
I have tried parsing data using 'locals' with no avail, setting the dialog scope to the main scope, etc. But I must be doing something wrong.
As an example I expect a mddialog to be open (using $mdDialog.show()). The modal template show a number, that can be increased by one when clicking a button on the dialog template. At the same time, the number is also outside the modal (parent), with another button that can decrease the number when clicked. The number is updated in both places when either button is clicked.
Use case is that we've got a page with lots of Angular. Sometimes we pop up a modal, and as the user interacts with the modal, it sends messages that result in the the main page (which is behind a semi-transparent overlay, but still partially visible) updating.
This is distracting, and I'd like to "lock" the main page while the modal is open.
I could do this by having some property on $rootScope and making the individual Angular controllers aware of that, but I really want to just select the DOM elements on the main page and essentially unhook their scopes from them temporarily, and then re-hook them when the modal closes.
Create a copy of your data using
$scope.modalData = angular.copy($scope.originalObject);
then update this object on the modal. Once you are ready to close the modal, at that step copy the data back to the DOM scope object.
$scope.originalObject = angular.copy($scope.modalData);
I'm using the UI-bootstrap modal window in my Angular application and I'm running into some kind of a scope problem.
I've got a modal dialog which basically has two modes. At first, it displays a list of existing items for the user to select from. In case the item the user needs is not in the list, he can click "Create", then I hide the div containing the list and display another div which contains an input form so the user can add an entry to the list. This is all really trivial stuff. The buttons to toggle which div is being shown work fine. I basically have a boolean scope variable called "create", which takes care of this.
Then, in the modal-footer I have two save buttons. One is shown when in "list" mode and the other is shown when the user is in "create" mode. Again, works fine.
Now, when the user is in "create" mode and clicks the corresponding "save" button, then I need to process the form and finally switch the state back to the list, that is set the "create" scope variable back to false, but this is not working for me. It's like I'm dealing with more than one scope since the view does not update when I update the "create" variable from the button click in the controller.
I've created a working Plunker which demonstrates this, please have a look:
http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
I know this is probably something really simple I'm missing. Hoping someone can point me in the right direction!
EDIT: As per the suggestion below from Mik378, I created an "intermediate" object in the scope and assigned the "create" variable to it. Now this works like I wanted to.
I updated the Plunker: http://plnkr.co/edit/KDxzH21Lmthg0bc0cfUT?p=preview
If you're using scope.myVariableToReach, you have to change that by scope.oneIntermediateObjectNotAccessibleInTheChildScope.myVariableToReach.
Otherwise, when you set scope.myVariableToReach directly, it would change the child one, not affecting the outer.
I am trying to get two multiselect widgets to stay in sync, but am only able to get the behaviour going in one direction.
One widget is on the main page, and the other one is in an angular ui-bootstrap modal. Both multiselect widgets are created using a custom directive. Each instance of the directive is bound to a different controller (MainCtrl and ModalCtrl). The "selected" attribute of each instance of the directive is bound to a scoped variable in their respective controller, which is in turn bound to the same getter method in the Model (getSelectedFilters).
If I change the selection on the widget on the main page, the change is reflected in the widget in the modal panel. However, if I change the selection in the modal panel, the change isn't reflected in the widget on the main page even if the Model has been properly updated (the button "Show currently selected" will show the correct selection even though the widget doesn't). I don't understand the difference at all.
Here is a stripped down plnkr illustrating my problem.
http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview
I am entirely new to Angular, and would appreciate any input as to why my directive on the main page isn't being updated properly when the data in the model changes.
Version 7 of the plnkr was what I had initially posted.
Basically, calling $apply on $scope.selected whenever the value was changed was not enough to notify the other directive of the change. I also had to setup a $watch:
$scope.$watch('selected', function(newVal, oldVal) {
select2.val(newVal).select2(options);
});
I am now completely unclear as to why the select2 directive in the modal was updating at all without a $watch when I was modifying the select2 directive on the main page. I would love if someone could explain what was going on there! To anyone who might know, go back to version 7 to see what I mean.
User can update value for multiple rows in an nggrid using a modal window. After user confirms update and closes modal window, grid does not refresh. Navigating away from page and coming back indicates that the update took effect, but I want this to take effect right away, without having to use location.reload(). Any ideas?
If your modal is a directive I'm guessing (without having seen the code) that you need a $scope.$apply in the directive...