angular-bootstrap-confirm - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

bower.json

 {
   "name": "angular-bootstrap-confirm",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "homepage": "https://github.com/mattlewis92/angular-bootstrap-confirm",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -0,1 +1,41 @@
+<a name="2.0.0"></a>
+# [2.0.0](https://github.com/mattlewis92/angular-bootstrap-confirm/compare/1.0.1...v2.0.0) (2016-05-01)
+
+
+### Features
+
+* **focusButton:** allow either the confirm or cancel button to be focused when the popover is open ([a1328a7](https://github.com/mattlewis92/angular-bootstrap-confirm/commit/a1328a7)), closes [#20](https://github.com/mattlewis92/angular-bootstrap-confirm/issues/20)
+* **isolateScope:** the directive no longer requires an isolate scope ([72ce933](https://github.com/mattlewis92/angular-bootstrap-confirm/commit/72ce933))
+
+
+### BREAKING CHANGES
+
+* focusButton: `focus-confirm-button` has been removed and replaced with `focus-button`
+
+Now by default neither button will be focused, compared to previously where the confirm button would always be focused.
+
+Before:
+```
+<button mwl-confirm focus-confirm-button="true"></button>
+```
+
+After:
+```
+<button mwl-confirm focus-button="confirm"></button>
+```
+
+Can also be configured globally with setting the `focusButton` property of the `confirmationPopoverDefaults` to either `confirm` or `cancel` like so:
+
+```
+.run(function(confirmationPopoverDefaults) {
+  confirmationPopoverDefaults.focusButton = 'confirm'; // restore the old behaviour in 1.x
+});
+```
+* isolateScope: The directive will only function as an attribute directive and not an element
+directive. This was undocumented so shouldn't affect any apps
+
+The template has also changed, so if you were using a custom template then you will need to update it.
+
+
+
 <a name="1.0.1"></a>
@@ -2,0 +42,0 @@ ## [1.0.1](https://github.com/mattlewis92/angular-bootstrap-confirm/compare/1.0.0...v1.0.1) (2016-04-20)

dist/angular-bootstrap-confirm.js

 /**
    * angular-bootstrap-confirm - Displays a bootstrap confirmation popover when clicking the given element.
-   * @version v1.0.1
+   * @version v2.0.0
    * @link https://github.com/mattlewis92/angular-bootstrap-confirm
@@ -82,15 +82,31 @@ * @license MIT
 
-	  .controller('PopoverConfirmCtrl', ["$scope", "$element", "$compile", "$document", "$window", "$timeout", "$injector", "$templateRequest", "confirmationPopoverDefaults", function($scope, $element, $compile, $document, $window, $timeout,
-	                                             $injector, $templateRequest, confirmationPopoverDefaults) {
+	  .controller('PopoverConfirmCtrl', ["$scope", "$rootScope", "$element", "$attrs", "$compile", "$document", "$window", "$timeout", "$injector", "$templateRequest", "$parse", "confirmationPopoverDefaults", function($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout,
+	                                             $injector, $templateRequest, $parse, confirmationPopoverDefaults) {
 	    var vm = this;
 	    vm.defaults = confirmationPopoverDefaults;
-	    vm.popoverPlacement = vm.placement || vm.defaults.placement;
+	    vm.$attrs = $attrs;
 	    var positionServiceName = $injector.has('$uibPosition') ? '$uibPosition' : '$position';
 	    var positionService = $injector.get(positionServiceName);
-	    var templateUrl = vm.templateUrl || confirmationPopoverDefaults.templateUrl;
+	    var templateUrl = $attrs.templateUrl || confirmationPopoverDefaults.templateUrl;
+	    var popoverScope = $rootScope.$new(true);
+	    popoverScope.vm = vm;
 
+	    function assignOuterScopeValue(scopeName, value) {
+	      if (angular.isDefined(scopeName)) {
+	        $parse(scopeName).assign($scope, value);
+	      }
+	    }
+
+	    function evaluateOuterScopeValue(scopeName, defaultValue) {
+	      if (angular.isDefined(scopeName)) {
+	        return $parse(scopeName)($scope);
+	      } else {
+	        return defaultValue;
+	      }
+	    }
+
 	    $templateRequest(templateUrl).then(function(template) {
 	      vm.popover = angular.element(template);
 	      vm.popover.css('display', 'none');
-	      $compile(vm.popover)($scope);
+	      $compile(vm.popover)(popoverScope);
 	      $document.find('body').append(vm.popover);
@@ -102,3 +118,3 @@ });
 	    function positionPopover() {
-	      var position = positionService.positionElements($element, vm.popover, vm.popoverPlacement, true);
+	      var position = positionService.positionElements($element, vm.popover, $attrs.placement || vm.defaults.placement, true);
 	      position.top += 'px';
@@ -109,6 +125,7 @@ position.left += 'px';
 
-	    function applyFocus(target) {
-	      var shouldFocus = angular.isDefined(vm.focusConfirmButton) ? vm.focusConfirmButton : vm.defaults.focusConfirmButton;
-	      if (shouldFocus) {
-	        target[0].focus();
+	    function applyFocus() {
+	      var buttonToFocus = $attrs.focusButton || vm.defaults.focusButton;
+	      if (buttonToFocus) {
+	        var targetButtonClass = buttonToFocus + '-button';
+	        vm.popover[0].getElementsByClassName(targetButtonClass)[0].focus();
 	      }
@@ -118,19 +135,16 @@ }
 	    function showPopover() {
-	      if (!vm.isVisible && !vm.isDisabled) {
+	      if (!vm.isVisible && !evaluateOuterScopeValue($attrs.isDisabled, false)) {
 	        vm.popover.css({display: 'block'});
 	        positionPopover();
-	        applyFocus(vm.popover[0].getElementsByClassName('confirm-button'));
+	        applyFocus();
 	        vm.isVisible = true;
-	        vm.isOpen = true;
+	        assignOuterScopeValue($attrs.isOpen, true);
 	      }
 	    }
 
-	    function hidePopover(focusElement) {
+	    function hidePopover() {
 	      if (vm.isVisible) {
 	        vm.popover.css({display: 'none'});
 	        vm.isVisible = false;
-	        if (focusElement) {
-	          applyFocus($element);
-	        }
-	        vm.isOpen = false;
+	        assignOuterScopeValue($attrs.isOpen, false);
 	      }
@@ -159,5 +173,13 @@ }
 
-	    $scope.$watch('vm.isOpen', function(isOpen) {
+	    vm.onConfirm = function() {
+	      evaluateOuterScopeValue($attrs.onConfirm);
+	    };
+
+	    vm.onCancel = function() {
+	      evaluateOuterScopeValue($attrs.onCancel);
+	    };
+
+	    $scope.$watch($attrs.isOpen, function(newIsOpenValue) {
 	      $timeout(function() { //timeout required so that documentClick() event doesn't fire and close it
-	        if (isOpen) {
+	        if (newIsOpenValue) {
 	          showPopover();
@@ -183,2 +205,3 @@ } else {
 	      $document.unbind('touchend', documentClick);
+	      popoverScope.$destroy();
 	    });
@@ -191,20 +214,4 @@
 	    return {
-	      restrict: 'EA',
-	      controller: 'PopoverConfirmCtrl as vm',
-	      bindToController: true,
-	      scope: {
-	        confirmText: '@',
-	        cancelText: '@',
-	        message: '@',
-	        title: '@',
-	        placement: '@',
-	        onConfirm: '&',
-	        onCancel: '&',
-	        confirmButtonType: '@',
-	        cancelButtonType: '@',
-	        isOpen: '=?',
-	        focusConfirmButton: '=?',
-	        templateUrl: '@',
-	        isDisabled: '=?'
-	      }
+	      restrict: 'A',
+	      controller: 'PopoverConfirmCtrl'
 	    };
@@ -220,3 +227,3 @@
 	    placement: 'top',
-	    focusConfirmButton: true,
+	    focusButton: null,
 	    templateUrl: DEFAULT_POPOVER_URL
@@ -238,3 +245,3 @@ })
 
-	module.exports = "<div class=\"popover\" ng-class=\"vm.popoverPlacement\">\n  <div class=\"arrow\"></div>\n  <h3 class=\"popover-title\" ng-bind-html=\"vm.title\"></h3>\n  <div class=\"popover-content\">\n    <p ng-bind-html=\"vm.message\"></p>\n    <div class=\"row\">\n      <div class=\"col-xs-6\">\n        <button\n          class=\"btn btn-block confirm-button\"\n          ng-class=\"'btn-' + (vm.confirmButtonType || vm.defaults.confirmButtonType)\"\n          ng-click=\"vm.onConfirm(); vm.hidePopover()\"\n          ng-bind-html=\"vm.confirmText || vm.defaults.confirmText\">\n        </button>\n      </div>\n      <div class=\"col-xs-6\">\n        <button\n          class=\"btn btn-block cancel-button\"\n          ng-class=\"'btn-' + (vm.cancelButtonType || vm.defaults.cancelButtonType)\"\n          ng-click=\"vm.onCancel(); vm.hidePopover(true)\"\n          ng-bind-html=\"vm.cancelText || vm.defaults.cancelText\">\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n"
+	module.exports = "<div class=\"popover\" ng-class=\"vm.$attrs.placement || vm.defaults.placement\">\n  <div class=\"arrow\"></div>\n  <h3 class=\"popover-title\" ng-bind-html=\"vm.$attrs.title\"></h3>\n  <div class=\"popover-content\">\n    <p ng-bind-html=\"vm.$attrs.message\"></p>\n    <div class=\"row\">\n      <div class=\"col-xs-6\">\n        <button\n          class=\"btn btn-block confirm-button\"\n          ng-class=\"'btn-' + (vm.$attrs.confirmButtonType || vm.defaults.confirmButtonType)\"\n          ng-click=\"vm.onConfirm(); vm.hidePopover()\"\n          ng-bind-html=\"vm.$attrs.confirmText || vm.defaults.confirmText\">\n        </button>\n      </div>\n      <div class=\"col-xs-6\">\n        <button\n          class=\"btn btn-block cancel-button\"\n          ng-class=\"'btn-' + (vm.$attrs.cancelButtonType || vm.defaults.cancelButtonType)\"\n          ng-click=\"vm.onCancel(); vm.hidePopover()\"\n          ng-bind-html=\"vm.$attrs.cancelText || vm.defaults.cancelText\">\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n"
 
@@ -241,0 +248,0 @@ /***/ },

dist/angular-bootstrap-confirm.min.js

 /**
    * angular-bootstrap-confirm - Displays a bootstrap confirmation popover when clicking the given element.
-   * @version v1.0.1
+   * @version v2.0.0
    * @link https://github.com/mattlewis92/angular-bootstrap-confirm
    * @license MIT
    */
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("angular"),require("angular-sanitize")):"function"==typeof define&&define.amd?define(["angular","angular-sanitize"],e):"object"==typeof exports?exports.angularBootstrapConfirmModuleName=e(require("angular"),require("angular-sanitize")):n.angularBootstrapConfirmModuleName=e(n.angular,n["angular-sanitize"])}(this,function(n,e){return function(n){function e(t){if(o[t])return o[t].exports;var i=o[t]={exports:{},id:t,loaded:!1};return n[t].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var o={};return e.m=n,e.c=o,e.p="",e(0)}([function(n,e,o){"use strict";var t=o(1),i=o(2);o(3),o(1);var r="angular-bootstrap-confirm.html";n.exports=t.module("mwl.confirm",["ngSanitize","ui.bootstrap.position"]).run(["$templateCache",function(n){n.put(r,i)}]).controller("PopoverConfirmCtrl",["$scope","$element","$compile","$document","$window","$timeout","$injector","$templateRequest","confirmationPopoverDefaults",function(n,e,o,i,r,s,c,l,a){function p(){var n=x.positionElements(e,b.popover,b.popoverPlacement,!0);n.top+="px",n.left+="px",b.popover.css(n)}function u(n){var e=t.isDefined(b.focusConfirmButton)?b.focusConfirmButton:b.defaults.focusConfirmButton;e&&n[0].focus()}function m(){b.isVisible||b.isDisabled||(b.popover.css({display:"block"}),p(),u(b.popover[0].getElementsByClassName("confirm-button")),b.isVisible=!0,b.isOpen=!0)}function f(n){b.isVisible&&(b.popover.css({display:"none"}),b.isVisible=!1,n&&u(e),b.isOpen=!1)}function v(){b.isVisible?f():m(),n.$apply()}function d(o){!b.isVisible||b.popover[0].contains(o.target)||e[0].contains(o.target)||(f(),n.$apply())}var b=this;b.defaults=a,b.popoverPlacement=b.placement||b.defaults.placement;var g=c.has("$uibPosition")?"$uibPosition":"$position",x=c.get(g),C=b.templateUrl||a.templateUrl;l(C).then(function(e){b.popover=t.element(e),b.popover.css("display","none"),o(b.popover)(n),i.find("body").append(b.popover)}),b.isVisible=!1,b.showPopover=m,b.hidePopover=f,b.togglePopover=v,n.$watch("vm.isOpen",function(n){s(function(){n?m():f()})}),e.bind("click",v),r.addEventListener("resize",p),i.bind("click",d),i.bind("touchend",d),n.$on("$destroy",function(){b.popover.remove(),e.unbind("click",v),r.removeEventListener("resize",p),i.unbind("click",d),i.unbind("touchend",d)})}]).directive("mwlConfirm",function(){return{restrict:"EA",controller:"PopoverConfirmCtrl as vm",bindToController:!0,scope:{confirmText:"@",cancelText:"@",message:"@",title:"@",placement:"@",onConfirm:"&",onCancel:"&",confirmButtonType:"@",cancelButtonType:"@",isOpen:"=?",focusConfirmButton:"=?",templateUrl:"@",isDisabled:"=?"}}}).value("confirmationPopoverDefaults",{confirmText:"Confirm",cancelText:"Cancel",confirmButtonType:"success",cancelButtonType:"default",placement:"top",focusConfirmButton:!0,templateUrl:r}).name},function(e,o){e.exports=n},function(n,e){n.exports='<div class="popover" ng-class="vm.popoverPlacement">\n  <div class="arrow"></div>\n  <h3 class="popover-title" ng-bind-html="vm.title"></h3>\n  <div class="popover-content">\n    <p ng-bind-html="vm.message"></p>\n    <div class="row">\n      <div class="col-xs-6">\n        <button\n          class="btn btn-block confirm-button"\n          ng-class="\'btn-\' + (vm.confirmButtonType || vm.defaults.confirmButtonType)"\n          ng-click="vm.onConfirm(); vm.hidePopover()"\n          ng-bind-html="vm.confirmText || vm.defaults.confirmText">\n        </button>\n      </div>\n      <div class="col-xs-6">\n        <button\n          class="btn btn-block cancel-button"\n          ng-class="\'btn-\' + (vm.cancelButtonType || vm.defaults.cancelButtonType)"\n          ng-click="vm.onCancel(); vm.hidePopover(true)"\n          ng-bind-html="vm.cancelText || vm.defaults.cancelText">\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n'},function(n,o){n.exports=e}])});
+!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("angular"),require("angular-sanitize")):"function"==typeof define&&define.amd?define(["angular","angular-sanitize"],t):"object"==typeof exports?exports.angularBootstrapConfirmModuleName=t(require("angular"),require("angular-sanitize")):n.angularBootstrapConfirmModuleName=t(n.angular,n["angular-sanitize"])}(this,function(n,t){return function(n){function t(o){if(e[o])return e[o].exports;var i=e[o]={exports:{},id:o,loaded:!1};return n[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var e={};return t.m=n,t.c=e,t.p="",t(0)}([function(n,t,e){"use strict";var o=e(1),i=e(2);e(3),e(1);var r="angular-bootstrap-confirm.html";n.exports=o.module("mwl.confirm",["ngSanitize","ui.bootstrap.position"]).run(["$templateCache",function(n){n.put(r,i)}]).controller("PopoverConfirmCtrl",["$scope","$rootScope","$element","$attrs","$compile","$document","$window","$timeout","$injector","$templateRequest","$parse","confirmationPopoverDefaults",function(n,t,e,i,r,s,a,c,l,p,u,f){function m(t,e){o.isDefined(t)&&u(t).assign(n,e)}function v(t,e){return o.isDefined(t)?u(t)(n):e}function d(){var n=B.positionElements(e,y.popover,i.placement||y.defaults.placement,!0);n.top+="px",n.left+="px",y.popover.css(n)}function b(){var n=i.focusButton||y.defaults.focusButton;if(n){var t=n+"-button";y.popover[0].getElementsByClassName(t)[0].focus()}}function $(){y.isVisible||v(i.isDisabled,!1)||(y.popover.css({display:"block"}),d(),b(),y.isVisible=!0,m(i.isOpen,!0))}function g(){y.isVisible&&(y.popover.css({display:"none"}),y.isVisible=!1,m(i.isOpen,!1))}function x(){y.isVisible?g():$(),n.$apply()}function h(t){!y.isVisible||y.popover[0].contains(t.target)||e[0].contains(t.target)||(g(),n.$apply())}var y=this;y.defaults=f,y.$attrs=i;var C=l.has("$uibPosition")?"$uibPosition":"$position",B=l.get(C),T=i.templateUrl||f.templateUrl,P=t.$new(!0);P.vm=y,p(T).then(function(n){y.popover=o.element(n),y.popover.css("display","none"),r(y.popover)(P),s.find("body").append(y.popover)}),y.isVisible=!1,y.showPopover=$,y.hidePopover=g,y.togglePopover=x,y.onConfirm=function(){v(i.onConfirm)},y.onCancel=function(){v(i.onCancel)},n.$watch(i.isOpen,function(n){c(function(){n?$():g()})}),e.bind("click",x),a.addEventListener("resize",d),s.bind("click",h),s.bind("touchend",h),n.$on("$destroy",function(){y.popover.remove(),e.unbind("click",x),a.removeEventListener("resize",d),s.unbind("click",h),s.unbind("touchend",h),P.$destroy()})}]).directive("mwlConfirm",function(){return{restrict:"A",controller:"PopoverConfirmCtrl"}}).value("confirmationPopoverDefaults",{confirmText:"Confirm",cancelText:"Cancel",confirmButtonType:"success",cancelButtonType:"default",placement:"top",focusButton:null,templateUrl:r}).name},function(t,e){t.exports=n},function(n,t){n.exports='<div class="popover" ng-class="vm.$attrs.placement || vm.defaults.placement">\n  <div class="arrow"></div>\n  <h3 class="popover-title" ng-bind-html="vm.$attrs.title"></h3>\n  <div class="popover-content">\n    <p ng-bind-html="vm.$attrs.message"></p>\n    <div class="row">\n      <div class="col-xs-6">\n        <button\n          class="btn btn-block confirm-button"\n          ng-class="\'btn-\' + (vm.$attrs.confirmButtonType || vm.defaults.confirmButtonType)"\n          ng-click="vm.onConfirm(); vm.hidePopover()"\n          ng-bind-html="vm.$attrs.confirmText || vm.defaults.confirmText">\n        </button>\n      </div>\n      <div class="col-xs-6">\n        <button\n          class="btn btn-block cancel-button"\n          ng-class="\'btn-\' + (vm.$attrs.cancelButtonType || vm.defaults.cancelButtonType)"\n          ng-click="vm.onCancel(); vm.hidePopover()"\n          ng-bind-html="vm.$attrs.cancelText || vm.defaults.cancelText">\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n'},function(n,e){n.exports=t}])});
 //# sourceMappingURL=angular-bootstrap-confirm.min.js.map

karma.conf.js

@@ -63,4 +63,8 @@ // Karma configuration
     coverageReporter: {
-      type: 'lcov',
-      dir : 'test/coverage/'
+      reporters: [{
+        type: 'text-summary'
+      }, {
+        type: 'lcov',
+        dir : 'test/coverage/',
+      }]
     },
@@ -67,0 +71,0 @@

package.json

 {
   "name": "angular-bootstrap-confirm",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Displays a bootstrap confirmation popover when clicking the given element.",
@@ -39,7 +39,7 @@ "browser": "dist/angular-bootstrap-confirm.js",
     "bootstrap": "^3.3.6",
-    "commitizen": "~2.7.6",
+    "commitizen": "~2.8.1",
     "conventional-changelog": "~1.1.0",
     "conventional-changelog-cli": "~1.1.1",
     "cz-conventional-changelog": "~1.1.5",
-    "eslint": "~2.8.0",
+    "eslint": "~2.9.0",
     "eslint-config-mwl": "~0.4.0",
@@ -46,0 +46,0 @@ "eslint-loader": "~1.3.0",

README.md

@@ -118,4 +118,4 @@ # Angular bootstrap confirm
 
-#### focus-confirm-button
-Whether to auto focus the confirm button. Default true.
+#### focus-button
+Set to either `confirm` or `cancel` to focus the confirm or cancel button. If omitted, by default it will not focus either button.
 
@@ -122,0 +122,0 @@ #### is-disabled

src/angular-bootstrap-confirm.js

@@ -20,15 +20,31 @@ 'use strict';
 
-  .controller('PopoverConfirmCtrl', function($scope, $element, $compile, $document, $window, $timeout,
-                                             $injector, $templateRequest, confirmationPopoverDefaults) {
+  .controller('PopoverConfirmCtrl', function($scope, $rootScope, $element, $attrs, $compile, $document, $window, $timeout,
+                                             $injector, $templateRequest, $parse, confirmationPopoverDefaults) {
     var vm = this;
     vm.defaults = confirmationPopoverDefaults;
-    vm.popoverPlacement = vm.placement || vm.defaults.placement;
+    vm.$attrs = $attrs;
     var positionServiceName = $injector.has('$uibPosition') ? '$uibPosition' : '$position';
     var positionService = $injector.get(positionServiceName);
-    var templateUrl = vm.templateUrl || confirmationPopoverDefaults.templateUrl;
+    var templateUrl = $attrs.templateUrl || confirmationPopoverDefaults.templateUrl;
+    var popoverScope = $rootScope.$new(true);
+    popoverScope.vm = vm;
 
+    function assignOuterScopeValue(scopeName, value) {
+      if (angular.isDefined(scopeName)) {
+        $parse(scopeName).assign($scope, value);
+      }
+    }
+
+    function evaluateOuterScopeValue(scopeName, defaultValue) {
+      if (angular.isDefined(scopeName)) {
+        return $parse(scopeName)($scope);
+      } else {
+        return defaultValue;
+      }
+    }
+
     $templateRequest(templateUrl).then(function(template) {
       vm.popover = angular.element(template);
       vm.popover.css('display', 'none');
-      $compile(vm.popover)($scope);
+      $compile(vm.popover)(popoverScope);
       $document.find('body').append(vm.popover);
@@ -40,3 +56,3 @@ });
     function positionPopover() {
-      var position = positionService.positionElements($element, vm.popover, vm.popoverPlacement, true);
+      var position = positionService.positionElements($element, vm.popover, $attrs.placement || vm.defaults.placement, true);
       position.top += 'px';
@@ -47,6 +63,7 @@ position.left += 'px';
 
-    function applyFocus(target) {
-      var shouldFocus = angular.isDefined(vm.focusConfirmButton) ? vm.focusConfirmButton : vm.defaults.focusConfirmButton;
-      if (shouldFocus) {
-        target[0].focus();
+    function applyFocus() {
+      var buttonToFocus = $attrs.focusButton || vm.defaults.focusButton;
+      if (buttonToFocus) {
+        var targetButtonClass = buttonToFocus + '-button';
+        vm.popover[0].getElementsByClassName(targetButtonClass)[0].focus();
       }
@@ -56,19 +73,16 @@ }
     function showPopover() {
-      if (!vm.isVisible && !vm.isDisabled) {
+      if (!vm.isVisible && !evaluateOuterScopeValue($attrs.isDisabled, false)) {
         vm.popover.css({display: 'block'});
         positionPopover();
-        applyFocus(vm.popover[0].getElementsByClassName('confirm-button'));
+        applyFocus();
         vm.isVisible = true;
-        vm.isOpen = true;
+        assignOuterScopeValue($attrs.isOpen, true);
       }
     }
 
-    function hidePopover(focusElement) {
+    function hidePopover() {
       if (vm.isVisible) {
         vm.popover.css({display: 'none'});
         vm.isVisible = false;
-        if (focusElement) {
-          applyFocus($element);
-        }
-        vm.isOpen = false;
+        assignOuterScopeValue($attrs.isOpen, false);
       }
@@ -97,5 +111,13 @@ }
 
-    $scope.$watch('vm.isOpen', function(isOpen) {
+    vm.onConfirm = function() {
+      evaluateOuterScopeValue($attrs.onConfirm);
+    };
+
+    vm.onCancel = function() {
+      evaluateOuterScopeValue($attrs.onCancel);
+    };
+
+    $scope.$watch($attrs.isOpen, function(newIsOpenValue) {
       $timeout(function() { //timeout required so that documentClick() event doesn't fire and close it
-        if (isOpen) {
+        if (newIsOpenValue) {
           showPopover();
@@ -121,2 +143,3 @@ } else {
       $document.unbind('touchend', documentClick);
+      popoverScope.$destroy();
     });
@@ -129,20 +152,4 @@
     return {
-      restrict: 'EA',
-      controller: 'PopoverConfirmCtrl as vm',
-      bindToController: true,
-      scope: {
-        confirmText: '@',
-        cancelText: '@',
-        message: '@',
-        title: '@',
-        placement: '@',
-        onConfirm: '&',
-        onCancel: '&',
-        confirmButtonType: '@',
-        cancelButtonType: '@',
-        isOpen: '=?',
-        focusConfirmButton: '=?',
-        templateUrl: '@',
-        isDisabled: '=?'
-      }
+      restrict: 'A',
+      controller: 'PopoverConfirmCtrl'
     };
@@ -158,3 +165,3 @@
     placement: 'top',
-    focusConfirmButton: true,
+    focusButton: null,
     templateUrl: DEFAULT_POPOVER_URL
@@ -161,0 +168,0 @@ })

test/angular-bootstrap-confirm.spec.js

@@ -37,6 +37,5 @@ 'use strict';
 
-    var scope, element, popover, $document, $injector, $controller;
+    var scope, element, popover, $injector, $controller, ctrl;
 
-    beforeEach(inject(function(_$controller_, $rootScope, _$document_, _$injector_) {
-      $document = _$document_;
+    beforeEach(inject(function(_$controller_, $rootScope, _$injector_) {
       $injector = _$injector_;
@@ -48,5 +47,8 @@ $controller = _$controller_;
       body.append(element);
-      $controller('PopoverConfirmCtrl as vm', {
+      ctrl = $controller('PopoverConfirmCtrl', {
         $scope: scope,
-        $element: element
+        $element: element,
+        $attrs: {
+          isDisabled: 'isDisabled'
+        }
       });
@@ -65,7 +67,8 @@ scope.$apply();
       sinon.spy($injector, 'get');
-      $controller('PopoverConfirmCtrl as vm', {
+      $controller('PopoverConfirmCtrl', {
         $scope: scope,
-        $element: element
+        $element: element,
+        $attrs: {}
       });
-      scope.$digest();
+      scope.$apply();
       expect($injector.get).to.have.been.calledWith('$position');
@@ -78,3 +81,3 @@ });
         expect(popover.is(':visible')).to.be.false;
-        scope.vm.showPopover();
+        ctrl.showPopover();
         expect(popover.is(':visible')).to.be.true;
@@ -84,5 +87,5 @@ });
       it('should not show the popover when isDisabled is true', function() {
-        scope.vm.isDisabled = true;
+        scope.isDisabled = true;
         expect(popover.is(':visible')).to.be.false;
-        scope.vm.showPopover();
+        ctrl.showPopover();
         expect(popover.is(':visible')).to.be.false;
@@ -97,5 +100,5 @@ });
         expect(popover.is(':visible')).to.be.false;
-        scope.vm.showPopover();
+        ctrl.showPopover();
         expect(popover.is(':visible')).to.be.true;
-        scope.vm.hidePopover();
+        ctrl.hidePopover();
         expect(popover.is(':visible')).to.be.false;
@@ -110,3 +113,3 @@ });
         expect(popover.is(':visible')).to.be.false;
-        scope.vm.togglePopover();
+        ctrl.togglePopover();
         expect(popover.is(':visible')).to.be.true;
@@ -116,5 +119,5 @@ });
       it('should hide the popover if visible', function() {
-        scope.vm.showPopover();
+        ctrl.showPopover();
         expect(popover.is(':visible')).to.be.true;
-        scope.vm.togglePopover();
+        ctrl.togglePopover();
         expect(popover.is(':visible')).to.be.false;
@@ -128,3 +131,3 @@ });
       beforeEach(function() {
-        scope.vm.showPopover();
+        ctrl.showPopover();
       });
@@ -152,3 +155,3 @@
       it('should hide the popover when the element is clicked and the element is visible', function() {
-        scope.vm.showPopover();
+        ctrl.showPopover();
         expect(popover.is(':visible')).to.be.true;
@@ -161,23 +164,2 @@ $(element).click();
 
-    describe('focus confirm button', function() {
-      /*
-      * Unfortunately phantomjs won't work with target.is(':focus'). See https://github.com/ariya/phantomjs/issues/10427
-      */
-      function expectToHaveFocus(target) {
-        expect(target[0]).to.equal($document[0].activeElement);
-      }
-
-      it('should focus popover confirm button when the element is clicked', function() {
-        $(element).click();
-        expectToHaveFocus(getConfirmButton(popover));
-      });
-
-      it('should focus element when the cancel button is clicked', function() {
-        $(element).click();
-        getCancelButton(popover).click();
-        expectToHaveFocus(element);
-      });
-
-    });
-
     describe('$destroy', function() {
@@ -213,3 +195,3 @@
       $compile(element)(scope);
-      scope.$digest();
+      scope.$apply();
       return $('body').find('.popover:first');
@@ -326,3 +308,3 @@ }
       otherButton.click();
-      scope.$digest();
+      scope.$apply();
       expect($(popover).is(':visible')).to.be.false;
@@ -336,3 +318,3 @@ });
       $(popover).find('.popover-title').click();
-      scope.$digest();
+      scope.$apply();
       expect($(popover).is(':visible')).to.be.true;
@@ -346,3 +328,3 @@ });
       getConfirmButton(popover).click();
-      scope.$digest();
+      scope.$apply();
       expect($(popover).is(':visible')).to.be.false;
@@ -356,3 +338,3 @@ });
       getCancelButton(popover).click();
-      scope.$digest();
+      scope.$apply();
       expect($(popover).is(':visible')).to.be.false;
@@ -387,4 +369,9 @@ });
 
-    it('should allow the focus-confirm-button option to be set as an attribute', function() {
-      createPopover('<button mwl-confirm focus-confirm-button="false">Test</button>');
+    function expectToHaveFocus(target) {
+      // Unfortunately phantomjs won't work with target.is(':focus'). See https://github.com/ariya/phantomjs/issues/10427
+      expect(target[0]).to.equal($document[0].activeElement);
+    }
+
+    it('should not focus either button by default', function() {
+      createPopover('<button mwl-confirm>Test</button>');
       var otherButton = $('<button></button>');
@@ -394,6 +381,20 @@ $('body').append(otherButton);
       $(element).click();
-      scope.$digest();
-      expect(otherButton[0]).to.equal($document[0].activeElement);
+      scope.$apply();
+      expectToHaveFocus(otherButton);
     });
 
+    it('should focus on the confirm button when the popover is opened', function() {
+      var popover = createPopover('<button mwl-confirm focus-button="confirm">Test</button>');
+      $(element).click();
+      scope.$apply();
+      expectToHaveFocus($(popover).find('button.confirm-button'));
+    });
+
+    it('should focus on the cancel button when the popover is opened', function() {
+      var popover = createPopover('<button mwl-confirm focus-button="cancel">Test</button>');
+      $(element).click();
+      scope.$apply();
+      expectToHaveFocus($(popover).find('button.cancel-button'));
+    });
+
     it('should have confirm button on the left with default popover template', function() {
@@ -400,0 +401,0 @@ var popover = createPopover('<button mwl-confirm>Test</button>');

No alert changes

Improved metrics

Total package byte prevSize

85664

increased by4.2%

Lines of code

1025

increased by1.28%

No dependency changes