Skip to content

Instantly share code, notes, and snippets.

@sielay
Created September 17, 2014 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sielay/a3e488cf168b8eb83116 to your computer and use it in GitHub Desktop.
Save sielay/a3e488cf168b8eb83116 to your computer and use it in GitHub Desktop.
I have spent days trying to understand how to add new controllers to page with Angular. Their documentation sucks, but I have found that finally
// https://github.com/angular-ui/bootstrap/blob/7b7cdf842278e86a677980d29bd74a1afd467ff1/src/modal/modal.js
angular.module('ui.bootstrap.modal', ['ui.bootstrap.transition'])
// ... some lines
// here $compile gets in by dependency injection... also spent hours debugging that :/
.factory('$modalStack', ['$transition', '$timeout', '$document', '$compile', '$rootScope', '$$stackedMap',
function ($transition, $timeout, $document, $compile, $rootScope, $$stackedMap) {
// ...
// that one accutally creates popup / adds to DOM / compiles controller
$modalStack.open = function (modalInstance, modal) {
// ...
var body = $document.find('body').eq(0), // dirty body pickup
// ...
var angularDomEl = angular.element('<div modal-window></div>'); // ditry DOM creation
angularDomEl.attr({
'template-url': modal.windowTemplateUrl,
'window-class': modal.windowClass,
'size': modal.size,
'index': openedWindows.length() - 1,
'animate': 'animate'
}).html(modal.content);
// dirty compile
var modalDomEl = $compile(angularDomEl)(modal.scope);
// dirty add to DOM
body.append(modalDomEl);
};
/**
* with little of VanillaJS and jQuery you can do that in less lines, but as everyone now loves angular it's worth understanding how they deal with such cases
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment