Passing a Directive to the Angular Material mdPanel Service

Question

I'm attempting to utilize the mdPanel service, a part of the Angular Material framework, to create popups for my app. I'm able to get the service to work, but had an idea to pass a directive to the service, such that I can have a dynamic form element that I can display. However, after an extensive perusal of the documentation, and a few google searches, I can't seem to find a feasible way of accomplishing this.

I'm somewhat new to Angular, so I apologize if this is self-evident. Thanks for any insights that can be provided here.

Answer 1

Pass in the form directive as a template. So if you had created a directive like this

angular.module('myApp')
.directive('myAwesomeFormDirective', [function() {
    return {           
        templateUrl: 'some/path/some.html',
        controller: "SomeFormController"
    };
}])

Your mdPanel config option will look something like shown below. You can configure other options anyway you like, but, "template" should be set to the relevant element directive.

 var config = {
    attachTo: angular.element(document.body),
    disableParentScroll: this.disableParentScroll,
    template: '<my-awesome-form-directive></my-awesome-form-directive>',
    hasBackdrop: true,
    panelClass: 'demo-dialog-example',
    position: position,
    trapFocus: true,
    zIndex: 150,
    clickOutsideToClose: true,
    escapeToClose: true,
    focusOnOpen: true
  };