expose panel state

[Michael-Dawkins]

I could not find a way to let a panel content know if it is currently being displayed or not. Because of this, I cannot apply ng-if to heavy panel content.

I tried to decorate with a directive of my own, but it does not work when the panel is opened via keyboard navigation.

Do you plan on exposing this state ?

Thank you

angular
        .module('app.common')
        .directive('exposeExpansionPanelState', exposeExpansionPanelState);

    function exposeExpansionPanelState() {
        return {
            restrict: 'A',
            require: '^^mdExpansionPanel',
            link: ExposeExpansionPanelState
        };
    }

    /* @ngInject */
    function ExposeExpansionPanelState(scope, element, attrs, expansionPanelCtrl) {
        var expandFunction = expansionPanelCtrl.expand;
        var collapseFunction = expansionPanelCtrl.collapse;

        expansionPanelCtrl.expand = function() {
            scope.$isOpen = true;
            expandFunction();
        };

        expansionPanelCtrl.collapse = function() {
            scope.$isOpen = false;
            collapseFunction();
        };
    }

[B-3PO]

I will add an isExpanded function to the exapnsionPanelService and scope $panel object. I will post an example with the update

[Michael-Dawkins]

That is great news, thank you!

[B-3PO]

added an isOpen function to the panel service and directive

expansionPanelCtrl.isOpen()

<md-expansion-panel>
  <md-expansion-expanded>
    <div ng-if="$panel.isOpen()"></div>
  </md-expansion-expanded>
</md-expansion-panel>

if added through the $mdExpansionPanelGroup service and controller is assigned

angular.module('app').controller('panelCtrl', function ($panel) {
  $panel.then(function (instance) {
    instance.isOpen();
  });
});