Control widget on controller initialization

[slavafomin]

Hello!

Thank you for this great module.

I have a use-case where I need to control initial state of the accordion according to the hash in the URL. I have several panes and each pane has a unique ID. If URL contains this ID I want to expand this tab on view initialization.

After some fiddling, I've came up with this solution:

var paneId = $location.hash();
if (paneId) {
  $scope.$on('$viewContentLoaded', function () {
    var paneIndex = $('#' + paneId).closest('v-pane').index();
    if (paneIndex > 0) {
      var cancelWatch = $scope.$watch('accordion', function (accordion) {
        $timeout(function () {
          accordion.expand(paneIndex);
        }, 0);
        cancelWatch();
      });
    }
  });
}

I have to use $scope.$on('$viewContentLoaded') and $scope.$watch('accordion') because I can't access accordion on scope directly, looks like it takes time to initialize it. This works, but it's very cumbersome approach.

Do you see a better way to approach this problem? Maybe we could somehow improve the design of the directive to address this issue?

I think, if we could give unique names to panes, e.g. my-super-pane than we could tell component to initially expand a pane for us, e.g. <v-accordion expand="my-super-pane">.

What do you think? Thank you!

[LukaszWatroba]

Hi!

Please download the latest release (1.4.0) and change your code to something like this:

Template:

<v-accordion id="my-accordion" control="myAccordion">
  <v-pane id="{{ pane.id }}" ng-repeat="pane in panes">
    <v-pane-header>
      {{ ::pane.header }}
    </v-pane-header>

    <v-pane-content>
      {{ ::pane.content }}
    </v-pane-content>
  </v-pane>
</v-accordion>

Controller:

$scope.$on('my-accordion:onReady', function () {
  myAccordion.toggle(yourSuperPaneId);
});

Basically now you can listen for yourAccordionId:onReady event and toggle the pane by it's id.
What do you think?

[slavafomin]

Oh, thank you Lukasz! This is much better than my current implementation for sure ))
However, I think that we shouldn't move this logic to controller itself. The more Angularish approach would be to implement it on a directive level in my opinion, e.g. add something like I've mentioned earlier: <v-accordion expand="my-super-pane-name">.