JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="MyCtrl">
# Partials: {{partials.length}}<br/>
<div ng-repeat="partial in partials">
<div ng-include="partial.name"></div>
</div>
</div>
CSS
.a0 {
background-color: green
}
.a1 {
background-color: LightBlue
}
JavaScript
var app = angular.module('app', []);
app.config(function($controllerProvider) {
// see page 12 of:
// http://www.slideshare.net/nirkaufman/angularjs-lazy-loading-techniques
app.lazyController = $controllerProvider.register;
});
// set of partials
var partials = [];
// store scope & templateCache, so we can dynamically insert partials
var scope, templateCache;
function MyCtrl($scope, $templateCache) {
$scope.partials = partials;
scope = $scope;
templateCache = $templateCache;
}
// add content chunks dynamically:
setTimeout(function() {
// add 2 chunks:
for(var i = 0; i < 2; ++i) {
// define controller
var ctrlName = 'partial' + i + 'Ctrl';
app.lazyController(ctrlName, function($scope) {
$scope.text = 'hi ' + i;
$scope.onClick = function() {
console.log('click: ' + $scope.text);
};
});
// add partial template that I have available in string form
var newPartial = {
name: 'template' + i,
content: '<div ng-controller="' + ctrlName + '" class="a' + i + '">' +
'<input type="text" ng-model="text"></input>'+
'{{text}} <br/>' +
'<button ng-click="onClick">Click</button>' +
'</div> <br/> <br/>'
};
partials[i] = newPartial;
// add template and notify angular of the content change
templateCache.put(partials[i].name, partials[i].content);
scope.$apply();
}
}, 600);