app.directive('mdiAttrs', function() {
    return {
        restrict: 'A',
        replace: true,
        link: (scope, elem) => {
            let attrs = scope.mdiCustomProperties || {};

            Object.keys(attrs).forEach(attrKey => elem.attr(attrKey, attrs[attrKey]));
        }
    };
});

app.directive('mdiInput', () => {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'templates/mdi-input.html',
        scope: (() => {
            const inputScope = angular.copy(directiveScopeModel);

            inputScope.mdiType = '@?';
            inputScope.mdiPlaceholder = '@?';
            inputScope.mdiTitle = '@?';

            return inputScope;
        })(),
        controller: $scope => {
            $scope.isLoading = false;
            $scope.mdiType = $scope.mdiType || 'text';
        }
    }
});

<label class="mdi-directive">
    <span class="mdi-label">{{mdiLabel}}</span>
    <input type="{{mdiType}}"
        class="mdi-component"
        ng-model="mdiModel"
        ng-click="mdiClick(this)"
        ng-blur="mdiBlur(this)"
        ng-class="{'loading': isLoading}"
        ng-disabled="isLoading"
        placeholder="{{mdiPlaceholder}}"
        ng-required="mdiRequired"
        title="{{mdiTitle}}"
        mdi-attrs="mdiCustomProperties">
</label>

<mdi-input mdi-model="mdiInputModel"
        mdi-blur="doRequest"
        mdi-label="MDI Input Directive"
        mdi-custom-properties="{'ui-mask': '(999) 999-9999'}"
        mdi-required="true">
 </mdi-input>