fix(collapse): add support for jade generated attributes (fixes #1762)

mgcrea · Jul 5, 2015 · 82ec48d · 82ec48d
1 parent 402eb7e
commit 82ec48d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js
@@ -24,8 +24,9 @@ angular.module('mgcrea.ngStrap.collapse', [])
       // use string regex match boolean attr falsy values, leave truthy values be
       var falseValueRegExp = /^(false|0|)$/i;
       angular.forEach(['disallowToggle', 'startCollapsed', 'allowMultiple'], function(key) {
-        if(angular.isDefined($attrs[key]) && falseValueRegExp.test($attrs[key]))
+        if(angular.isDefined($attrs[key]) && falseValueRegExp.test($attrs[key])) {
           self.$options[key] = false;
+        }
       });
 
       self.$toggles = [];
@@ -210,7 +211,7 @@ angular.module('mgcrea.ngStrap.collapse', [])
         });
 
         element.on('click', function() {
-          var index = attrs.bsCollapseToggle || bsCollapseCtrl.$toggles.indexOf(element);
+          var index = attrs.bsCollapseToggle && attrs.bsCollapseToggle !== 'bs-collapse-toggle' ? attrs.bsCollapseToggle : bsCollapseCtrl.$toggles.indexOf(element);
           bsCollapseCtrl.$setActive(index * 1);
           scope.$apply();
         });

diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js
@@ -28,6 +28,9 @@ describe('collapse', function () {
     'default': {
       element: '<div class="panel-group" bs-collapse><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a bs-collapse-toggle>title-1</a></h4></div><div class="panel-collapse" bs-collapse-target><div class="panel-body">content-1</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a bs-collapse-toggle>title-2</a></h4></div><div class="panel-collapse" bs-collapse-target><div class="panel-body">content-2</div></div></div></div>'
     },
+    'jade-attributes': {
+      element: '<div class="panel-group" bs-collapse="bs-collapse"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a bs-collapse-toggle="bs-collapse-toggle">title-1</a></h4></div><div class="panel-collapse" bs-collapse-target="bs-collapse-target"><div class="panel-body">content-1</div></div></div><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a bs-collapse-toggle="bs-collapse-toggle">title-2</a></h4></div><div class="panel-collapse" bs-collapse-target="bs-collapse-target"><div class="panel-body">content-2</div></div></div></div>'
+    },
     'template-ngRepeat': {
       scope: {panels: [
         {title:'Collapsible Group Item #1', body: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.'},
@@ -108,6 +111,20 @@ describe('collapse', function () {
 
   });
 
+  describe('with jade-like template', function () {
+
+    it('should navigate between panels on click', function() {
+      var elm = compileDirective('jade-attributes');
+      expect(sandboxEl.find('[bs-collapse-target]:eq(0)').hasClass('in')).toBeTruthy();
+      sandboxEl.find('[bs-collapse-toggle]:eq(1)').triggerHandler('click');
+      expect(sandboxEl.find('[bs-collapse-target]:eq(0)').hasClass('in')).toBeFalsy();
+      expect(sandboxEl.find('[bs-collapse-target]:eq(1)').hasClass('in')).toBeTruthy();
+      sandboxEl.find('[bs-collapse-toggle]:eq(1)').triggerHandler('click');
+      expect(sandboxEl.find('[bs-collapse-target]:eq(1)').hasClass('in')).toBeFalsy();
+    });
+
+  });
+
   describe('with ngRepeat template', function () {
 
     it('should navigate between panels on click', function() {