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...
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.
I encounter the problems of modal-backdrop hidekeep append in my ionic view.
I need to call modal for my code. In my case, if the students click to the button check the answer then the modal of marking status will comes out.
However, If I repeatedly answer a lot of questions, the modal-backdrop hide append everytime I click the button.
Is it anyway to clear the cache for the modal like in <ion-view cache-view="false"></ion-view>?
You need to use ionic modal remove instead of hide.. Refer this Ionic Documentation.
http://ionicframework.com/docs/api/service/$ionicModal/
I have a classic dropdown menu on an Angular project with a main link always shown and a tree of sublinks shown only when hovering this one.
I have two events on the parent:
ng-mouseenter="vm.toggleDropdown($event)"
ng-mouseleave="vm.hideDropdowns($event)"
And they work perfectly fine. The main link has a simple:
ng-click="vm.navToState(item.urlState, $event)"
With a $state.go within to go to the string passed as parameter. On mobile devices, ng-mouseenter is being triggered on tap, showing the dropdown menu and this is perfect. The thing is that ng-click is being triggered too so the menu is only visible a fraction of a second before the next state loads. Is there any way to detect if ng-click is being fired by a touch event so I could add an if statement to navToState() and prevent the $state.go()? I understand that this way that main link would be unreachable in mobile but I'll take care of that adding an extra link within the dropdown.
Any other workaround for the same result is fine too.
Thanks!
Could you set a variable based on whether it is a mobile browser and use that as a check navToStart as to whether you state change or not, then have a separate state change function that doesn't care whether it's mobile or not so you can still change states in the mobile browser? That's one idea, but if it doesn't work, could be worth putting some code in your question for a reference.
Here's an answer on detecting mobile browsers:
https://stackoverflow.com/a/11381730/5349719
I am trying to use $anchorScroll and $location.hash() to scroll to a div. I have a bottom on the top of the page. When I click the bottom, I want the page to scroll down to the bottom of the page where I have a <div id="target">.
For some reason, the first time I click the button, my page doesn't scroll. If a click a second time, the page does scroll. And afterwards the scrolling works fine. This weird behavior can be reproduced if I refresh my page.
I have this code in my controller:
$scope.scrolldown = function() {
$location.hash('target');
$anchorScroll();
}
I know that the $location.hash('target') line is supposed to append a hash value to the end of my URL.
Here's the URL when my page first got loaded:
http://run.plnkr.co/iqvdGjdeCP4idP4D/
After I clicked my button for the 1st time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target
which was not right (and the page was not scrolling properly).
After I clicked my button for the 2nd time, it becomes:
http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target#target
From this point on the page started to scroll properly, but the URL still looks very strange to me -- why would I want two hash values?
I want to know why the button only works after second click and how to correct it.
Update
I added routing to my code and the scroll is working fine now.
Here's my plunker demo with routing.
Take a look at this question, which contains a possible solution for you:
Supress reloading of ui-router based view on query parameter change
It works the second time you click the button because the hash doesn't change (and so the route doesn't reload). Notice the page flickering when you click it the first time? That's an indicator that the whole DOM has been re-rendered.
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.