Merge pull request #32 from dwmkerr/f/ControllerAs

F/controller as

README.md

@@ -38,7 +38,7 @@ Now just inject the modal service into any controller, service or directive wher
 
 ```js
 app.controller('SampleController', function($scope, ModalService) {
-  
+
   $scope.showAModal = function() {
 
   	// Just provide a template url, a controller and call 'showModal'.
@@ -61,8 +61,8 @@ app.controller('SampleController', function($scope, ModalService) {
 ```
 
 Calling `showModal` returns a promise which is resolved when the modal DOM element is created
-and the controller for it is created. The promise returns a `modal` object which contains the 
-element created, the controller, the scope and a `close` promise which is resolved when the 
+and the controller for it is created. The promise returns a `modal` object which contains the
+element created, the controller, the scope and a `close` promise which is resolved when the
 modal is closed - this `close` promise provides the result of the modal close function.
 
 The modal controller can be any controller that you like, just remember that it is always
@@ -71,7 +71,7 @@ for a bootstrap modal:
 
 ```js
 app.controller('SampleModalController', function($scope, close) {
-  
+
  $scope.close = function(result) {
  	close(result, 200); // close, but give 200ms for bootstrap to animate
  };
@@ -80,9 +80,9 @@ app.controller('SampleModalController', function($scope, close) {
 ```
 
 The `close` function is automatically injected to the modal controller and takes the result
-object (which is passed to the `close` promise used by the caller). It can take an optional 
+object (which is passed to the `close` promise used by the caller). It can take an optional
 second parameter, the number of milliseconds to wait before destroying the DOM element. This
-is so that you can have a delay before destroying the DOM element if you are animating the 
+is so that you can have a delay before destroying the DOM element if you are animating the
 closure.
 
 Now just make sure the `close` function is called by your modal controller when the modal
@@ -95,9 +95,10 @@ for the gritty details of why.
 The `showModal` function takes an object with these fields:
 
 * `controller`: The name of the controller to created.
+* `controllerAs` : The name controllerAs - (optional)
 * `templateUrl`: The URL of the HTML template to use for the modal.
 * `template`: If `templateUrl` is not specified, you can specify `template` as raw
-  HTML for the modal. 
+  HTML for the modal.
 * `inputs`: A set of values to pass as inputs to the controller. Each value provided
   is injected into the controller constructor.
 * `appendElement`: The custom angular element to append the modal to instead of default body.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-modal-service",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "homepage": "https://github.com/dwmkerr/angular-modal-service",
   "authors": [
     "Dave Kerr (github.com/dwmkerr)"

dst/angular-modal-service.js

@@ -15,13 +15,13 @@
 
     //  Get the body of the document, we'll add the modal to this.
     var body = $document.find('body');
-    
+
     function ModalService() {
 
       var self = this;
 
       //  Returns a promise which gets the template, either
-      //  from the template parameter or via a request to the 
+      //  from the template parameter or via a request to the
       //  template url parameter.
       var getTemplate = function(template, templateUrl) {
         var deferred = $q.defer();
@@ -52,17 +52,23 @@
       };
 
       self.showModal = function(options) {
-        
+
         //  Create a deferred we'll resolve when the modal is ready.
         var deferred = $q.defer();
 
         //  Validate the input parameters.
-        var controller = options.controller;
-        if(!controller) {
+        var controllerName = options.controller;
+        if(!controllerName) {
           deferred.reject("No controller has been specified.");
           return deferred.promise;
         }
 
+        //  If a 'controllerAs' option has been provided, we change the controller
+        //  name to use 'as' syntax. $controller will automatically handle this.
+        if(options.controllerAs) {
+          controllerName = controllerName + " as " + options.controllerAs;
+        }
+
         //  Get the actual html of the template.
         getTemplate(options.template, options.templateUrl)
           .then(function(template) {
@@ -74,7 +80,7 @@
             //  the scope, as well as all inputs provided.
             //  We will also create a deferred that is resolved with a provided
             //  close function. The controller can then call 'close(result)'.
-            //  The controller can also provide a delay for closing - this is 
+            //  The controller can also provide a delay for closing - this is
             //  helpful if there are closing animations which must finish first.
             var closeDeferred = $q.defer();
             var inputs = {
@@ -104,7 +110,8 @@
             inputs.$element = modalElement;
 
             //  Create the controller, explicitly specifying the scope to use.
-            var modalController = $controller(controller, inputs);
+            var modalController = $controller(controllerName, inputs);
+
 
             //  Finally, append the modal to the dom.
             if (options.appendElement) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-modal-service",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "AngularJS Service for showing Modals and Popups",
   "main": "server.js",
   "scripts": {
@@ -25,17 +25,17 @@
   "homepage": "https://github.com/dwmkerr/angular-modal-service",
   "devDependencies": {
     "express": "^4.4.0",
-    "grunt": "~0.4.5",
-    "grunt-contrib-uglify": "~0.6",
-    "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-watch": "~0.6.1",
+    "grunt": "~0.4",
+    "grunt-contrib-uglify": "~0.7",
+    "grunt-contrib-jshint": "~0.11",
+    "grunt-contrib-watch": "~0.6",
     "karma": "~0.12.16",
     "karma-coverage": "^0.2.1",
-    "karma-jasmine": "~0.2.0",
+    "karma-jasmine": "~0.3",
     "karma-phantomjs-launcher": "^0.1.4",
     "karma-chrome-launcher": "^0.1.3",
-    "karma-junit-reporter": "~0.2.2",
-    "grunt-karma": "~0.9",
+    "karma-junit-reporter": "~0.2",
+    "grunt-karma": "~0.10",
     "grunt-contrib-copy": "~0.7",
     "coveralls": "^2.10.0"
   }

src/angular-modal-service.js

@@ -15,13 +15,13 @@
 
     //  Get the body of the document, we'll add the modal to this.
     var body = $document.find('body');
-    
+
     function ModalService() {
 
       var self = this;
 
       //  Returns a promise which gets the template, either
-      //  from the template parameter or via a request to the 
+      //  from the template parameter or via a request to the
       //  template url parameter.
       var getTemplate = function(template, templateUrl) {
         var deferred = $q.defer();
@@ -52,17 +52,23 @@
       };
 
       self.showModal = function(options) {
-        
+
         //  Create a deferred we'll resolve when the modal is ready.
         var deferred = $q.defer();
 
         //  Validate the input parameters.
-        var controller = options.controller;
-        if(!controller) {
+        var controllerName = options.controller;
+        if(!controllerName) {
           deferred.reject("No controller has been specified.");
           return deferred.promise;
         }
 
+        //  If a 'controllerAs' option has been provided, we change the controller
+        //  name to use 'as' syntax. $controller will automatically handle this.
+        if(options.controllerAs) {
+          controllerName = controllerName + " as " + options.controllerAs;
+        }
+
         //  Get the actual html of the template.
         getTemplate(options.template, options.templateUrl)
           .then(function(template) {
@@ -74,7 +80,7 @@
             //  the scope, as well as all inputs provided.
             //  We will also create a deferred that is resolved with a provided
             //  close function. The controller can then call 'close(result)'.
-            //  The controller can also provide a delay for closing - this is 
+            //  The controller can also provide a delay for closing - this is
             //  helpful if there are closing animations which must finish first.
             var closeDeferred = $q.defer();
             var inputs = {
@@ -104,7 +110,8 @@
             inputs.$element = modalElement;
 
             //  Create the controller, explicitly specifying the scope to use.
-            var modalController = $controller(controller, inputs);
+            var modalController = $controller(controllerName, inputs);
+
 
             //  Finally, append the modal to the dom.
             if (options.appendElement) {

test/controller.spec.js

@@ -12,6 +12,9 @@ describe('controller', function() {
       $scope.input1 = input1;
       $scope.input2 = input2;
       $scope.close = close;
+    })
+    .controller('ControllerAsController', function() {
+      this.character = "Fry";
     });
 
   beforeEach(function() {
@@ -71,4 +74,27 @@ describe('controller', function() {
 
   });
 
+  it('should add a controller to the scope if controllerAs is used', function() {
+
+    $httpBackend.expectGET('some/controllertemplate.html');
+
+    ModalService.showModal({
+      controller: 'ControllerAsController',
+      controllerAs: 'futurama',
+      templateUrl: 'some/controllertemplate.html'
+    }).then(function(modal) {
+
+      //  The controller should be on the scope.
+      expect(modal.scope.futurama).not.toBeNull();
+
+      //  Fields defined on the controller instance should be on the 
+      //  controller on the scope.
+      expect(modal.scope.futurama.character).toBe('Fry');
+
+    });
+
+    $httpBackend.flush();
+
+  });
+
 });