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

[alexkushner]

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]

I believe this is addressed with PR https://github.com/zurb/foundation-apps/pull/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]

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]

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]

this will be addressed with https://github.com/base-apps/angular-base-apps/issues/25