dialog: autoWrap in $mdDialog does not work

[yueluog]

Actual Behavior:

• What is the issue? *
  According to $mdDialog spec, If we have a customized directive that expands to md-dialog, we can set autoWrap to false. However, this does not always work. The dialog would not show up.

(If we set autoWrap to true, it works. But two levels of md-dialog are generated, and the caller has no way to style the first level of md-dialog. This makes attribute flex="xxx" useless.)

• What is the expected behavior?
  Dialog should open.

Demo:
http://plnkr.co/edit/8cMGwKAstTXchz6juEXY?p=preview
No dialog shows up when the button is clicked. And there is error on console.

Uncaught TypeError: node.hasAttribute is not a function
    at expect (angular-material.js:2016)
    at angular-material.js:2035

This demo is based on another bug report: #8409 (comment). The only change is that I added "autoWrap: false".
It is possible that there is some link between that bug and this one.

AngularJS Versions: *

• AngularJS Version: 1.5.9
• AngularJS Material Version: 1.1

Additional Information:

• Browser Type: Chrome
• Browser Version: * 56.0.2924.87
• OS: * Ubuntu
• Stack Traces:

[yueluog]

I found some information that may be related: http://stackoverflow.com/questions/32097593/angularjs-templateurl-vs-template-scope-issue. The answer in the Stackoverflow is not directly to this bug, but I think the principal applies. My hypothesis is that when templateUrl is used, this bug happens because during the compilation, the custom directive is not expanded yet to md-dialog. Whereas if template is used, then the compilation will expand the custom directive to md-dialog early and ngmaterial code will see that md-dialog is already there, and honor autoWrap.

[Splaktar]

This issue is due to an exception in the MdAriaService's expect function that checks if the expected aria-label attribute exists on the target element or child:

material/src/core/services/aria/aria.js

Lines 74 to 88 in ecf1705

	/**
	* Check if expected attribute has been specified on the target element or child
	* @param element
	* @param attrName
	* @param {optional} defaultValue What to set the attr to if no value is found
	*/
	function expect(element, attrName, defaultValue) {
	var node = angular.element(element)[0] || element;
	// if node exists and neither it nor its children have the attribute
	if (node &&
	((!node.hasAttribute(attrName) ||
	node.getAttribute(attrName).length === 0) &&
	!childHasAttribute(node, attrName))) {

In this demo, it gets passed two elements. It checks the md-subheader which has no aria-label and it checks an empty JQLite object which has no hasAttribute function and throws the exception.

If autoWrap is true, then the elements passed in are an md-dialog and the md-subheader.

So it looks like the Aria checks don't pass in the proper parent element when autoWrap is false.

[Splaktar]

I've migrated this demo to StackBlitz and updated it to not rely on .component() as that is unsupported (#8409). This new demo demonstrates that autoWrap: false is working properly when using a supported .directive().

I'm going to close this, but I'll mention in #8409 that we need to ensure that autoWrap works properly.