md-dialog and directives

[franjuan]

Actual Behavior:

• What is the issue? *
  This issue is completelly based on #3897. In fact is a reopening of the issue.
  The problem appears when you are opening a dialog using the $mdDialog.show service if the template used for the dialog does not contain explicitly the md-dialog tag. This tag is included in a directive part of the former template. There is a javascript exception (stack trace is also included at the end) and the dialog is not shown.
  The error appears in the following function :

/**
   * 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))) {

      defaultValue = angular.isString(defaultValue) ? defaultValue.trim() : '';
      if (defaultValue.length) {
        element.attr(attrName, defaultValue);
      } else if (showWarnings) {
        $log.warn('ARIA: Attribute "', attrName, '", required for accessibility, is missing on node:', node);
      }

    }
  }

It seems that the node is accessed before the compile and not found as the directive containing md-dialog has not been formed yet.
An alternate solution is shown here. It is working for me, but I consider this behavior as faulty from my point of view.

• What is the expected behavior?
  The dialog should be shown normally, as the ' md-dialog` tag is included in the template inside a directive

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
• Details:

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Chrome, but I don't think it is related to it. Replicated in other browsers too
• Browser Version: * 54.0.2840.87 m (64-bit)
• OS: * Windows 10, replicated in other OS
• Stack Traces:
  • Uncaught TypeError: node.hasAttribute is not a function(…) angular-material.js:1879
    expect @ angular-material.js:1879
    (anonymous function) @ angular-material.js:1898
  • Uncaught (in promise) Cannot read property 'parentNode' of undefined DialogService.js:24
    (anonymous function) @ DialogService.js:24
    processQueue @ scripts.js:22829
    (anonymous function) @ scripts.js:22845
    $eval @ scripts.js:23967
    $digest @ scripts.js:23806
    $apply @ scripts.js:24075
    done @ scripts.js:18738
    completeRequest @ scripts.js:18908
    requestLoaded @ scripts.js:18857

Thanks in advance!!!

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[Splaktar]

Thank you for taking the time to submit this issue. However it does not follow our required issue template. A CodePen demo/reproduction of the issue is required for us to be able to investigate.

Please file a new issue that follows the template. This gives the team the information needed to investigate the bug or prioritize the feature.