MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll continue setting up our Update Customer Modal instance using Angular UI, so that we can select a customer record and pop open the Modal. We’ll also do a quick test to see if we can send the details of a selected customer and display the details on the Update Customer Modal.
We look at:
– A recap of adding Angular UI model code back in our app to create an Update Customer Modal
– Setting up our Modal Instance and Controller
– How we pass a selected customer’s details through to our Modal
– How we choose the template that we want to use (to display the html layout) within our Modal
– Selecting pieces of Angular UI example code to set up our Modal controller instance
– Testing to see if our Modal works by hooking it into an ng-click directive
– Passing through the details of a selected customer to the Update Modal
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
OK I’ve fixed my issue now – I checked out the Angular Bootstrap documentation and it looks like I was using the wrong version of Angular, it had to be 1.4+ in order to work with the 1+ version of Angular Bootstrap.
I’m having issues with the modal, I got up to the 9:25 mark in the video and now my customers aren’t loading and I’m getting the following error:
Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal <- CustomersController
It looks like a missing dependency, I've checked my bower folder and angular-bootstrap is there, it's also being loaded in the source code. Is there a way to check if it's being injected into the app?
Thanks!
hi Shristi, possible to explain how i can limit pages/certain areas to admin or users states?
Regarding the modal:
I updated the class of the first div from page-header to modal-header
I updated the second div from col-sm-12 to modal-body
That fixed the modal box issues, however, the backdrop is still not appearing correctly and I suspect something else is missing
For the modal backdrop, here are some options: http://stackoverflow.com/questions/26926798/angular-ui-modal-directive-backdrop-missing
I checked the browsers console log and didn’t get any errors. I checked through Chrome’s element list and it seems that I have a start tag partnering with its end tag:
First Name
I wish I could send you a screen shot of what I’m seeing. Just think of every other row with missing CSS on my modal window. So, “Edit Customer” would have a white background, as well as the selected user’s name. But the label “First Name” and after the Update button would have grey background. It seems that every other row is part of the modal window or part of the white background.
I hope that paints a better picture.
Hey Denny – It’s hard to tell what the issue might be. If you’re still having trouble, maybe try the mean.js google group: https://groups.google.com/forum/#!forum/meanjs
I didn’t quite get the same modal window as you. For me, I got the window to pop up but it looks like it is in sections. So, Edit Customer is a modal window. “First Name” label is shown but as part of the grey underlying background. Then the users first name as a modal window, then a blank line which again looks like the grey underlying background and finally the Update button. So, it looks like the modal window works but not displaying correctly or displaying correctly for different fields of the window.
Any idea how to fix t his?
Hey Denny – I’m not sure if I’m picturing it right, but I recommend that you go through your Html code and make sure that every start tag has its partnering end tag.
Also have a look at your browsers console log to see if the app is complaining about anything.