fix(accordion): correct is-open handling for dynamic groups

Closes angular-ui#1297
chrisirhc · Dec 13, 2013 · 62b7dd8 · 62b7dd8
1 parent 471c4ee
commit 62b7dd8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/accordion/accordion.js b/src/accordion/accordion.js
@@ -9,9 +9,6 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
   // This array keeps track of the accordion groups
   this.groups = [];
 
-  // Keep reference to user's scope to properly assign `is-open`
-  this.scope = $scope;
-
   // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to
   this.closeOthers = function(openGroup) {
     var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
@@ -81,7 +78,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
         getIsOpen = $parse(attrs.isOpen);
         setIsOpen = getIsOpen.assign;
 
-        accordionCtrl.scope.$watch(getIsOpen, function(value) {
+        scope.$parent.$watch(getIsOpen, function(value) {
           scope.isOpen = !!value;
         });
       }
@@ -91,7 +88,7 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
           accordionCtrl.closeOthers(scope);
         }
         if ( setIsOpen ) {
-          setIsOpen(accordionCtrl.scope, value);
+          setIsOpen(scope.$parent, value);
         }
       });
     }

diff --git a/src/accordion/test/accordion.spec.js b/src/accordion/test/accordion.spec.js
@@ -217,13 +217,12 @@ describe('accordion', function () {
     describe('is-open attribute', function() {
       beforeEach(function () {
         var tpl =
-          "<accordion>" +
-            "<accordion-group heading=\"title 1\" is-open=\"open1\">Content 1</accordion-group>" +
-            "<accordion-group heading=\"title 2\" is-open=\"open2\">Content 2</accordion-group>" +
-            "</accordion>";
+          '<accordion>' +
+            '<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
+            '<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
+            '</accordion>';
         element = angular.element(tpl);
-        scope.open1 = false;
-        scope.open2 = true;
+        scope.open = { first: false, second: true };
         $compile(element)(scope);
         scope.$digest();
         groups = element.find('.accordion-group');
@@ -237,11 +236,11 @@ describe('accordion', function () {
       it('should toggle variable on element click', function() {
         findGroupLink(0).click();
         scope.$digest();
-        expect(scope.open1).toBe(true);
+        expect(scope.open.first).toBe(true);
 
         findGroupLink(0).click();
         scope.$digest();
-        expect(scope.open1).toBe(false);
+        expect(scope.open.second).toBe(false);
       });
     });
 
@@ -272,6 +271,42 @@ describe('accordion', function () {
       });
     });
 
+    describe('is-open attribute with dynamic groups', function () {
+      var model;
+      beforeEach(function () {
+        var tpl =
+          '<accordion>' +
+            '<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
+          '</accordion>';
+        element = angular.element(tpl);
+        scope.groups = [
+          {name: 'title 1', content: 'Content 1', open: false},
+          {name: 'title 2', content: 'Content 2', open: true}
+        ];
+        $compile(element)(scope);
+        scope.$digest();
+
+        groups = element.find('.accordion-group');
+      });
+
+      it('should have visible group body when the group with isOpen set to true', function () {
+        expect(findGroupBody(0).scope().isOpen).toBe(false);
+        expect(findGroupBody(1).scope().isOpen).toBe(true);
+      });
+
+      it('should toggle element on click', function() {
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(findGroupBody(0).scope().isOpen).toBe(true);
+        expect(scope.groups[0].open).toBe(true);
+
+        findGroupLink(0).click();
+        scope.$digest();
+        expect(findGroupBody(0).scope().isOpen).toBe(false);
+        expect(scope.groups[0].open).toBe(false);
+      });
+    });
+
     describe('accordion-heading element', function() {
       beforeEach(function() {
         var tpl =