recompiling angular directive to add ng-module and ng-change programmatically

Question

I want to know if I'm doing something right.

Preamble: I have developed a Typeahead class that consumes a resource and stores the results within itself. The class has more or less the following structure:

• input: where the search text is stored.
• list: where the result is stored.
• change: a function that is executed every time input changes.
• cursor: a function that tracks the current hovered/selected element.

The issue is that if I want to attach all the required properties to an input, the code looks bloated:

<input 
  type="text"
  ng-model="myTa.input"
  ng-change="myTa.change();"
  ng-keyup="myTa.cursor()"
  .... 
/>

What I wanted to accomplish was a directive that would only need the Typeahead instance and it will attach all required properties to the element automatically. For example:

<input type="text" my-typeahead="myTa" />

Before continuing, I want to make clear the following:

• I don't want to use template nor templateUrl since I want to make the directive very flexible and let it be attached to inputs, textareas, selects and even links.
• I don't want to use attrs.$observe or scope.$watch since ng-model does an excellent job and accomplishes what I'm looking for.
• I'm aware that new elements within the root element will compile without any tricks, but the parent itself will not compile new directives. (which makes sense)

Now, will I burn in hell if I do this:

angular
.module('myTypeaheadDirective', [])
.directive('myTypeahead', function($compile, $rootScope) {
    return {
        restrict: 'A',
        scope: {
            typeahead: '=myTypeahead'
        },
        compile: function() {
            return {
                pre: function precompile(scope, element, attrs) {
                    var installedAttribute = 'my-typeahead-installed';

                    if ( angular.isUndefined( element.attr( installedAttribute ) ) ) {
                        element.attr('ng-model', 'typeahead.input');
                        element.attr('ng-change', 'typeahead.change()');
                        element.attr( installedAttribute, true );
                        $compile(element)(scope.$parent);
                    }
                }
            }
        }
    }
});

To explain the code:

The directive pre compile process checks if it has already been installed, otherwise it will break into an infinite loop.

Inside the condition I add as many directives as I want.

Notice that I'm using ng-model="typeahead.input" but that's an isolated scope so I can have multiple inputs with different typeahead instances.

After attaching the new directives, I use the $compile service to recompile the element using the parent scope (so it can access the original typeahead instance).

My questions are:

• What I'm doing here is naive?
• Is there a better way to do this?
• Will recompiling the element cause performance issues?
• Will accessing the parent scope in such a way cause issues?

Thank you very much for taking your time :)

Answer 1

Since what you are passing into the isolated scope can just as easily be used just from the attribute value ...could remove the isolated scope and then directive scope would be that of parent.

To set the typeahead object from attribute only could do:

var typeahead= attrs.myTypeahead;
element.attr('ng-model', typeahead+'.input');