ng-messages not showing inside $mdDialog

[LQkkeN]

CodePen Demo

In the following small example, validation works (red lines appear and disappear based on input), but the ng-message do not display.

<form name="addUnitForm" ng-submit="addUnit(unit.name)">
    <md-input-container>
        <label>Name</label>
        <input name="name" type="text" ng-required="true" ng-model="unit.name" minlength="1" />
        <div ng-messages="addUnitForm.name.$error">
            <div ng-message-exp="['required', 'minlength']">Error message</div>
        </div>
    </md-input-container>
    [...]
</form>

The same code works when not inside an $mdDialog directive, so my best guess is, the directive is messing things up. This is the code initializing the dialogue:

$scope.addUnit = function() {
    $mdDialog.show({
        templateUrl: 'templates/addUnit.html',
        parent: angular.element(document.body),
        scope: $scope,
        clickOutsideToClose: true,
        preserveScope: true,
        controller: function(scope) {
            [...]
        }
    });
}

Could it be related to my inheritance of the global $scope into the directive?

[topherfangio]

@mathiasLM It may be related. Can you wrap this up in a Codepen so that we can do some debugging please? 😄

[LQkkeN]

Codepen

[topherfangio]

Thanks for the demo; I'm not immediately seeing the problem, so we'll need to look a bit deeper.

[LQkkeN]

I've located the culprit. Removing this line fixes the issue:

parent: angular.element(document.body)

I'm not certain, why this is, though..

[bradrich]

@mathiaslm89 Good news, this is an easy fix that only requires making sure that the Angular application is bootstrapped to the body element of your application.

Please see this pen: http://codepen.io/bradrich/pen/yJXxbk.

Closing the issue as it is not related to Material.