Dynamically load AngularJS controller within a modal


First of all, the idea was to have modal dialog using Bootstrap modal (More info.) and hookup controllers dynamically as the new controllers will be registered dynamically when needed.

Now, let’s move into action:

1- Normal AngularJS app definition, just notice the reference of the $controllerProvider (More info.)

image 

2- Main controller definition

image

3- In our index.html we add the AngularJS controller binding and a simple Bootstrap modal link with the associated target template.

image

4- Modal target page definition, notice the child controller hookup and the Ajax loading for the child controller definition at the end.

image 

5- Child controller definition, notice it’s done via the cp.register (Controller Provider)

image

6- Last and the magic trick Smile , after all loaded force compiling the modal main element within the prospective scope.

image

7- Finally, result will be like the following:

image

Sample code can be obtained from (here)

P.S. The sample in html only, just open directly from the folder.

I hope that helped

Ahmed

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s