feat(collapse): optimize attribute parsing and standardize promises

angular-ui · Jan 13, 2016 · bca2e25 · bca2e25
1 parent c3c43b2
commit bca2e25
Showing 1 changed file with 50 additions and 43 deletions.
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
@@ -1,79 +1,86 @@
 angular.module('ui.bootstrap.collapse', [])
 
-  .directive('uibCollapse', ['$animate', '$q', '$injector', function($animate, $q, $injector) {
+  .directive('uibCollapse', ['$animate', '$q', '$parse', '$injector', function($animate, $q, $parse, $injector) {
     var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null;
     return {
       link: function(scope, element, attrs) {
+        var expandingExpr = $parse(attrs.expanding),
+            expandedExpr = $parse(attrs.expanded),
+            collapsingExpr = $parse(attrs.collapsing),
+            collapsedExpr = $parse(attrs.collapsed);
+
         if (!scope.$eval(attrs.uibCollapse)) {
           element.addClass('in')
             .addClass('collapse')
             .css({height: 'auto'});
         }
 
         function expand() {
-          $q.when(scope.$eval(attrs.expanding), function() {
-            element.removeClass('collapse')
-              .addClass('collapsing')
-              .attr('aria-expanded', true)
-              .attr('aria-hidden', false);
+          $q.resolve(expandingExpr(scope))
+            .then(function() {
+              element.removeClass('collapse')
+                .addClass('collapsing')
+                .attr('aria-expanded', true)
+                .attr('aria-hidden', false);
 
-            if ($animateCss) {
-              $animateCss(element, {
-                addClass: 'in',
-                easing: 'ease',
-                to: { height: element[0].scrollHeight + 'px' }
-              }).start()['finally'](expandDone);
-            } else {
-              $animate.addClass(element, 'in', {
-                to: { height: element[0].scrollHeight + 'px' }
-              }).then(expandDone);
-            }
-          });
+              if ($animateCss) {
+                $animateCss(element, {
+                  addClass: 'in',
+                  easing: 'ease',
+                  to: { height: element[0].scrollHeight + 'px' }
+                }).start()['finally'](expandDone);
+              } else {
+                $animate.addClass(element, 'in', {
+                  to: { height: element[0].scrollHeight + 'px' }
+                }).then(expandDone);
+              }
+            });
         }
 
         function expandDone() {
           element.removeClass('collapsing')
             .addClass('collapse')
             .css({height: 'auto'});
-          scope.$eval(attrs.expanded);
+          expandedExpr(scope);
         }
 
         function collapse() {
           if (!element.hasClass('collapse') && !element.hasClass('in')) {
             return collapseDone();
           }
 
-          $q.when(scope.$eval(attrs.collapsing), function() {
-            element
-            // IMPORTANT: The height must be set before adding "collapsing" class.
-            // Otherwise, the browser attempts to animate from height 0 (in
-            // collapsing class) to the given height here.
-              .css({height: element[0].scrollHeight + 'px'})
-              // initially all panel collapse have the collapse class, this removal
-              // prevents the animation from jumping to collapsed state
-              .removeClass('collapse')
-              .addClass('collapsing')
-              .attr('aria-expanded', false)
-              .attr('aria-hidden', true);
+          $q.resolve(collapsingExpr(scope))
+            .then(function() {
+              element
+                // IMPORTANT: The height must be set before adding "collapsing" class.
+                // Otherwise, the browser attempts to animate from height 0 (in
+                // collapsing class) to the given height here.
+                .css({height: element[0].scrollHeight + 'px'})
+                // initially all panel collapse have the collapse class, this removal
+                // prevents the animation from jumping to collapsed state
+                .removeClass('collapse')
+                .addClass('collapsing')
+                .attr('aria-expanded', false)
+                .attr('aria-hidden', true);
 
-            if ($animateCss) {
-              $animateCss(element, {
-                removeClass: 'in',
-                to: {height: '0'}
-              }).start()['finally'](collapseDone);
-            } else {
-              $animate.removeClass(element, 'in', {
-                to: {height: '0'}
-              }).then(collapseDone);
-            }
-          });
+              if ($animateCss) {
+                $animateCss(element, {
+                  removeClass: 'in',
+                  to: {height: '0'}
+                }).start()['finally'](collapseDone);
+              } else {
+                $animate.removeClass(element, 'in', {
+                  to: {height: '0'}
+                }).then(collapseDone);
+              }
+            });
         }
 
         function collapseDone() {
           element.css({height: '0'}); // Required so that collapse works when animation is disabled
           element.removeClass('collapsing')
             .addClass('collapse');
-          scope.$eval(attrs.collapsed);
+          collapsedExpr(scope);
         }
 
         scope.$watch(attrs.uibCollapse, function(shouldCollapse) {