Passing Directives to Angular Material mdPanel Service

Question

I am trying to use the mdPanel service, which is part of the Angular Material structure, to create pop-ups for my application. I can make the service work, but I had the idea of ​​passing a directive to the service so that I could have a dynamic form element that I can display. However, after a detailed reading of the documentation and several Google searches, I can’t find a way to implement this.

I'm a little new to Angular, so I apologize if that goes without saying. Thanks for any ideas that can be provided here.

Answer 1

Go to the form as a template. So, if you created such a directive

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

Your mdPanel configuration option will look something like the following. You can configure other parameters in any case, but the "template" must be set in the directive of the corresponding element.

  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 };