Adding ngModel to input with a directive

Question

I have an input element and I would like to bind a ngModel and a ngClass to it using a custom directive, but I'm having some troubles.

What I have:

<input type="text" myDirective="PropertyFromScope" />

What I want as result:

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" />

I'm trying to avoid using templates, because I want the directive to work with any input tag.

Here's what I got so far:

angular.module('customDirectives', [])
.directive('myDirective', function () {
    var linker = function (scope, element, attrs) {
        attrs.$set('ngModel', attrs.myDirective);
        attrs.$set('ngClass', '{\'class\' : MethodFromScope}');
    }
    return {
        restrict: 'A',        
        link: linker
    }
});

Here's a JSFiddle: http://jsfiddle.net/Q8QJJ/

Answer 1

Are you trying to accomplish this ?

Pretty simple solution:

myApp.directive('myDirective', function ($compile) {
    return {
        restrict: 'A',        
        compile: function(element, attrs) {
            element.attr('ng-model', attrs.myDirective);
            element.removeAttr("my-directive");
            element.attr('ng-class', '{\'class\' : testFunction()}');
            return {
               pre: function preLink(scope, iElement, iAttrs, controller) { },
               post: function postLink(scope, iElement, iAttrs, controller) { 
                 $compile(iElement)(scope);
               }
            }
        }
    }
});

Here is a fiddle http://jsfiddle.net/V9e9M/

Answer 2

I was unable to get this to work in a compile function (it added the attributes, but it did not seem to notice them). However, this linking function seems to work:

myApp.directive('myDirective', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var wrappedElement = angular.element(
                '<input type="' + attrs.type + '" ng-model="' 
                 + attrs.myDirective + '">');
            element.replaceWith(wrappedElement);
            $compile(wrappedElement)(scope);
        }
    }
});

Fiddle

Note: I forgot to add ng-class, but I assume if ng-model works, ng-class should work.

Update:

Here's a version that uses a compile function:

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        compile: function (tElement, tAttrs) {
            // for some unknown-to-me reason, the input must
            // be wrapped in a span or div:
            var tplElement = angular.element('<span><input></span>');
            var inputEl = tplElement.find('input');
            inputEl.attr('type', tAttrs.type);
            inputEl.attr('ng-model', tAttrs.myDirective);
            tElement.replaceWith(tplElement);
        }
    };
});

Fiddle