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