Monday, March 4, 2013

AngularJs: One Modal Many Controllers

I started seeing a common pattern in my app for adding a new xml node to a page.  I’m tired of copy and pasting the html for a modal where the only change is two small pieces of text.
Problem: only one ng-view can be on a page. Where to put ng-controller’s?    Nesting all the controllers around ng-view is not a good idea.
Solution:  ng-template to the rescue.  Be sure to update $routeProvider to include the route. If you use this route, don’t include the controller in the route.

We don’t have to use ng-template, but then we would have to create a whole new file with just two lines of code!
The script tag below is embedded inside <div ng-app>. 

<script type="text/ng-template" id="addTask.html">
<div ng-controller="newTaskCtrl" class="form-inline">
<div ng-include src="'genericAddItemModal.html'"></div>
</div>
</script>



I’ve even gone so for as to include another  <div ng-include src=”protoXmlFile”></div> where the protoXmlFile name is set in the controller with all my variables.


This can be further simplified by using the routeProvider by calling the same template , but different controller.  Then you don’t even need to use the script template method shown above. 


$routeProvider.when('/addCoi/:className', { templateUrl: 'addListModal.html', controller: addCoiCtrl });

No comments:

Post a Comment