diff --git a/README.md b/README.md index 4172584..89f2fcc 100644 --- a/README.md +++ b/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. diff --git a/bower.json b/bower.json index 592f2b8..dddf3d4 100644 --- a/bower.json +++ b/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)" diff --git a/dst/angular-modal-service.js b/dst/angular-modal-service.js index ee047b7..39fc21f 100644 --- a/dst/angular-modal-service.js +++ b/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) { diff --git a/dst/angular-modal-service.min.js b/dst/angular-modal-service.min.js index 19fc056..9b7a591 100644 --- a/dst/angular-modal-service.min.js +++ b/dst/angular-modal-service.min.js @@ -1,3 +1,3 @@ -/*! angular-modal-service - v0.5.0 - 2014-11-24 github.com/dwmkerr/angular-modal-service */ -!function(){"use strict";var a=angular.module("angularModalService",[]);a.factory("ModalService",["$document","$compile","$controller","$http","$rootScope","$q","$timeout","$templateCache",function(a,b,c,d,e,f,g,h){function i(){var a=this,i=function(a,b){var c=f.defer();if(a)c.resolve(a);else if(b){var e=h.get(b);void 0!==e?c.resolve(e):d({method:"GET",url:b,cache:!0}).then(function(a){h.put(b,a.data),c.resolve(a.data)}).catch(function(a){c.reject(a)})}else c.reject("No template or templateUrl has been specified.");return c.promise};a.showModal=function(a){var d=f.defer(),h=a.controller;return h?(i(a.template,a.templateUrl).then(function(i){var k=e.$new(),l=f.defer(),m={$scope:k,close:function(a,b){(void 0===b||null===b)&&(b=0),g(function(){l.resolve(a)},b)}};if(a.inputs)for(var n in a.inputs)m[n]=a.inputs[n];var o=angular.element(i),p=b(o),q=p(k);m.$element=q;var r=c(h,m);a.appendElement?a.appendElement.append(q):j.append(q);var s={controller:r,scope:k,element:q,close:l.promise};s.close.then(function(){k.$destroy(),q.remove()}),d.resolve(s)}).catch(function(a){d.reject(a)}),d.promise):(d.reject("No controller has been specified."),d.promise)}}var j=a.find("body");return new i}])}(); +/*! angular-modal-service - v0.5.0 - 2015-01-23 github.com/dwmkerr/angular-modal-service */ +!function(){"use strict";var a=angular.module("angularModalService",[]);a.factory("ModalService",["$document","$compile","$controller","$http","$rootScope","$q","$timeout","$templateCache",function(a,b,c,d,e,f,g,h){function i(){var a=this,i=function(a,b){var c=f.defer();if(a)c.resolve(a);else if(b){var e=h.get(b);void 0!==e?c.resolve(e):d({method:"GET",url:b,cache:!0}).then(function(a){h.put(b,a.data),c.resolve(a.data)})["catch"](function(a){c.reject(a)})}else c.reject("No template or templateUrl has been specified.");return c.promise};a.showModal=function(a){var d=f.defer(),h=a.controller;return h?(a.controllerAs&&(h=h+" as "+a.controllerAs),i(a.template,a.templateUrl).then(function(i){var k=e.$new(),l=f.defer(),m={$scope:k,close:function(a,b){(void 0===b||null===b)&&(b=0),g(function(){l.resolve(a)},b)}};if(a.inputs)for(var n in a.inputs)m[n]=a.inputs[n];var o=angular.element(i),p=b(o),q=p(k);m.$element=q;var r=c(h,m);a.appendElement?a.appendElement.append(q):j.append(q);var s={controller:r,scope:k,element:q,close:l.promise};s.close.then(function(){k.$destroy(),q.remove()}),d.resolve(s)})["catch"](function(a){d.reject(a)}),d.promise):(d.reject("No controller has been specified."),d.promise)}}var j=a.find("body");return new i}])}(); //# sourceMappingURL=angular-modal-service.min.js.map \ No newline at end of file diff --git a/dst/angular-modal-service.min.js.map b/dst/angular-modal-service.min.js.map index be8de99..1024b91 100644 --- a/dst/angular-modal-service.min.js.map +++ b/dst/angular-modal-service.min.js.map @@ -1 +1 @@ -{"version":3,"file":"angular-modal-service.min.js","sources":["../src/angular-modal-service.js"],"names":["module","angular","factory","$document","$compile","$controller","$http","$rootScope","$q","$timeout","$templateCache","ModalService","self","this","getTemplate","template","templateUrl","deferred","defer","resolve","cachedTemplate","get","undefined","method","url","cache","then","result","put","data","catch","error","reject","promise","showModal","options","controller","modalScope","$new","closeDeferred","inputs","$scope","close","delay","inputName","modalElementTemplate","element","linkFn","modalElement","$element","modalController","appendElement","append","body","modal","scope","$destroy","remove","find"],"mappings":";CAMC,WAEC,YAEA,IAAIA,GAASC,QAAQD,OAAO,yBAE5BA,GAAOE,QAAQ,gBAAiB,YAAa,WAAY,cAAe,QAAS,aAAc,KAAM,WAAY,iBAC/G,SAASC,EAAWC,EAAUC,EAAaC,EAAOC,EAAYC,EAAIC,EAAUC,GAK5E,QAASC,KAEP,GAAIC,GAAOC,KAKPC,EAAc,SAASC,EAAUC,GACnC,GAAIC,GAAWT,EAAGU,OAClB,IAAGH,EACDE,EAASE,QAAQJ,OACZ,IAAGC,EAAa,CAErB,GAAII,GAAiBV,EAAeW,IAAIL,EAClBM,UAAnBF,EACDH,EAASE,QAAQC,GAIjBd,GAAOiB,OAAQ,MAAOC,IAAKR,EAAaS,OAAO,IAC5CC,KAAK,SAASC,GAEbjB,EAAekB,IAAIZ,EAAaW,EAAOE,MACvCZ,EAASE,QAAQQ,EAAOE,QAEzBC,MAAM,SAASC,GACdd,EAASe,OAAOD,SAItBd,GAASe,OAAO,iDAElB,OAAOf,GAASgB,QAGlBrB,GAAKsB,UAAY,SAASC,GAGxB,GAAIlB,GAAWT,EAAGU,QAGdkB,EAAaD,EAAQC,UACzB,OAAIA,IAMJtB,EAAYqB,EAAQpB,SAAUoB,EAAQnB,aACnCU,KAAK,SAASX,GAGb,GAAIsB,GAAa9B,EAAW+B,OAQxBC,EAAgB/B,EAAGU,QACnBsB,GACFC,OAAQJ,EACRK,MAAO,SAASf,EAAQgB,IACTrB,SAAVqB,GAAiC,OAAVA,KAAgBA,EAAQ,GAClDlC,EAAS,WACP8B,EAAcpB,QAAQQ,IACrBgB,IAKP,IAAGR,EAAQK,OACT,IAAI,GAAII,KAAaT,GAAQK,OAC3BA,EAAOI,GAAaT,EAAQK,OAAOI,EAKvC,IAAIC,GAAuB5C,QAAQ6C,QAAQ/B,GAIvCgC,EAAS3C,EAASyC,GAClBG,EAAeD,EAAOV,EAC1BG,GAAOS,SAAWD,CAGlB,IAAIE,GAAkB7C,EAAY+B,EAAYI,EAG1CL,GAAQgB,cAEVhB,EAAQgB,cAAcC,OAAOJ,GAG7BK,EAAKD,OAAOJ,EAId,IAAIM,IACFlB,WAAYc,EACZK,MAAOlB,EACPS,QAASE,EACTN,MAAOH,EAAcN,QAIvBqB,GAAMZ,MAAMhB,KAAK,WAEfW,EAAWmB,WAEXR,EAAaS,WAGfxC,EAASE,QAAQmC,KAGlBxB,MAAM,SAASC,GACdd,EAASe,OAAOD,KAGbd,EAASgB,UA/EdhB,EAASe,OAAO,qCACTf,EAASgB,UA9CtB,GAAIoB,GAAOlD,EAAUuD,KAAK,OAiI1B,OAAO,IAAI/C"} \ No newline at end of file +{"version":3,"file":"angular-modal-service.min.js","sources":["../src/angular-modal-service.js"],"names":["module","angular","factory","$document","$compile","$controller","$http","$rootScope","$q","$timeout","$templateCache","ModalService","self","this","getTemplate","template","templateUrl","deferred","defer","resolve","cachedTemplate","get","undefined","method","url","cache","then","result","put","data","error","reject","promise","showModal","options","controllerName","controller","controllerAs","modalScope","$new","closeDeferred","inputs","$scope","close","delay","inputName","modalElementTemplate","element","linkFn","modalElement","$element","modalController","appendElement","append","body","modal","scope","$destroy","remove","find"],"mappings":";CAMC,WAEC,YAEA,IAAIA,GAASC,QAAQD,OAAO,yBAE5BA,GAAOE,QAAQ,gBAAiB,YAAa,WAAY,cAAe,QAAS,aAAc,KAAM,WAAY,iBAC/G,SAASC,EAAWC,EAAUC,EAAaC,EAAOC,EAAYC,EAAIC,EAAUC,GAK5E,QAASC,KAEP,GAAIC,GAAOC,KAKPC,EAAc,SAASC,EAAUC,GACnC,GAAIC,GAAWT,EAAGU,OAClB,IAAGH,EACDE,EAASE,QAAQJ,OACZ,IAAGC,EAAa,CAErB,GAAII,GAAiBV,EAAeW,IAAIL,EAClBM,UAAnBF,EACDH,EAASE,QAAQC,GAIjBd,GAAOiB,OAAQ,MAAOC,IAAKR,EAAaS,OAAO,IAC5CC,KAAK,SAASC,GAEbjB,EAAekB,IAAIZ,EAAaW,EAAOE,MACvCZ,EAASE,QAAQQ,EAAOE,QAJ5BvB,SAMS,SAASwB,GACdb,EAASc,OAAOD,SAItBb,GAASc,OAAO,iDAElB,OAAOd,GAASe,QAGlBpB,GAAKqB,UAAY,SAASC,GAGxB,GAAIjB,GAAWT,EAAGU,QAGdiB,EAAiBD,EAAQE,UAC7B,OAAID,IAODD,EAAQG,eACTF,EAAiBA,EAAiB,OAASD,EAAQG,cAIrDvB,EAAYoB,EAAQnB,SAAUmB,EAAQlB,aACnCU,KAAK,SAASX,GAGb,GAAIuB,GAAa/B,EAAWgC,OAQxBC,EAAgBhC,EAAGU,QACnBuB,GACFC,OAAQJ,EACRK,MAAO,SAAShB,EAAQiB,IACTtB,SAAVsB,GAAiC,OAAVA,KAAgBA,EAAQ,GAClDnC,EAAS,WACP+B,EAAcrB,QAAQQ,IACrBiB,IAKP,IAAGV,EAAQO,OACT,IAAI,GAAII,KAAaX,GAAQO,OAC3BA,EAAOI,GAAaX,EAAQO,OAAOI,EAKvC,IAAIC,GAAuB7C,QAAQ8C,QAAQhC,GAIvCiC,EAAS5C,EAAS0C,GAClBG,EAAeD,EAAOV,EAC1BG,GAAOS,SAAWD,CAGlB,IAAIE,GAAkB9C,EAAY8B,EAAgBM,EAI9CP,GAAQkB,cAEVlB,EAAQkB,cAAcC,OAAOJ,GAG7BK,EAAKD,OAAOJ,EAId,IAAIM,IACFnB,WAAYe,EACZK,MAAOlB,EACPS,QAASE,EACTN,MAAOH,EAAcR,QAIvBuB,GAAMZ,MAAMjB,KAAK,WAEfY,EAAWmB,WAEXR,EAAaS,WAGfzC,EAASE,QAAQoC,KApErBzC,SAuES,SAASgB,GACdb,EAASc,OAAOD,KAGbb,EAASe,UAtFdf,EAASc,OAAO,qCACTd,EAASe,UA9CtB,GAAIsB,GAAOnD,EAAUwD,KAAK,OAwI1B,OAAO,IAAIhD"} \ No newline at end of file diff --git a/package.json b/package.json index 1aff332..20b4ae4 100644 --- a/package.json +++ b/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" } diff --git a/src/angular-modal-service.js b/src/angular-modal-service.js index ee047b7..39fc21f 100644 --- a/src/angular-modal-service.js +++ b/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) { diff --git a/test/controller.spec.js b/test/controller.spec.js index ce84079..f184b52 100644 --- a/test/controller.spec.js +++ b/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(); + + }); + }); \ No newline at end of file