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.

9 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • natenate89
    Reply

    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.

  • natenate89
    Reply

    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!

  • cykonetic
    Reply

    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

  • Denny
    Reply

    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.

  • Denny
    Reply

    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?

    • bossable

      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.