angularjsangular-materialng-messages

Parameter default ngMessages directive


In order to do a little work around on AngularJS Material inputs, I would like to know if I can parameter all ngMessages directives without create a new one or add my attribute everywhere.

<md-input-container class="md-block" flex>
    <label>Label</label>
    <input type="number" name="number" ng-model="number" min="0" max="10" required>
    <div ng-messages="form.number.$error" md-auto-hide="false"> <!-- mdAutoHide -->
        <div ng-message="required">This is required</div>
        <div ng-message="min">Min is 0</div>
        <div ng-message="max">Max is 10</div>
    </div>
</md-input-container>

Is there a solution to automatically add mdAutoHide attribute on all ngMessages?


Solution

  • You could write a directive specially for this. This short code is wrong, cause it's a long time I didn't do angular js. But yon can see the approach:

    //directive
    angular.module('app').directive('messageHidden', function () {
        var tpl = '<div>ng-messages="form.number.$error" md-auto-hide="false"></div>'
        for(var input in $scope.inputs){
            tpl += '<div ng-message="'+input.type+'">'"+input.message+"'</div>';
        }
    
        return {
             restrict: 'E',
            replace: true,
            transclude: true,
           scope: {name: '@inputs'},
           template: tpl
       }
    });
    
    
    
    //ctrl
    $scope.inputs = [
        {
            "type" : "required",
            "message" : "this is required"
        },
        {
            "type" : "min",
            "message" : "min is 0"
        },
        {
            "type" : "max",
            "message" : "max is 10"
        },
    
    ]
    

    //view

    <messageHidden inputs="$scope.inputs"/>