Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

Accordion should have a way to set item 'active' state at init time #765

Open
alexkushner opened this issue Jan 20, 2016 · 4 comments
Open

Comments

@alexkushner
Copy link

This is currently only possible by clicking on the title (which calls activate). It would be nice to be able to specify some accordion items as expanded by default when the page loads, e.g.:

<zf-accordion-item title="my expanded section" active="true">
...
</zf-accordion-item>

Maybe something like this in the directive:

  //accordion item
  function zfAccordionItem() {
    var directive = {
        restrict: 'EA',
        templateUrl: 'components/accordion/accordion-item.html',
        transclude: true,
        scope: {
          title: '@',
          active: '@'
        },
        require: '^zfAccordion',
        replace: true,
        controller: function() {},
        link: link
    };

    return directive;

    function link(scope, element, attrs, controller, transclude) {
      scope.active = scope.active === "true" ? true : false;
      controller.addSection(scope);

      scope.activate = function() {
        controller.select(scope);
      };

    }
  }
@soumak77
Copy link
Contributor

I believe this is addressed with PR #670, however per my comments, some standardization of how active state is handled should be addressed before making these one off changes. I'll leave it up to the folks at zurb as to whether or not this advice is taken into consideration.

@alexkushner
Copy link
Author

Cool! Thanks for the pointer! I missed that PR somehow. Model binding is even better, although I suppose it's incomplete as scope.active = false in the link function would always override whatever is passed in, no?

@soumak77
Copy link
Contributor

Correct, adding optional two way binding would require checking if the active attribute was set on the element. If so, the code does not need to set scope.active as the initial value was provided by the user. If the active attribute is not set, the code would have to set scope.active = false by default as the active property on the scope will not exist since it was not provided by the user.

@soumak77
Copy link
Contributor

this will be addressed with base-apps/angular-base-apps#25

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

2 participants