Thomas Zoé Thomas Zoé - 1 year ago 139
AngularJS Question

Is it possible to add a directive to the input of a md-autocomplete

I use a directive which formats my input. Now I also want to use it with the input of a md-autcomplete.

I think that I have read using two directive with isolated scope on one element isn't possible. Am I right?
Otherwise how can I get access to the input of a md-autocomplete?

Thank you in advance

further information: (angular material 1.1 + angular 1.5.*)

source of component:

.component('payeeInformation', {
bindings: {...
templateUrl: 'payeeInformationTemplate',

controller:function(autocompleteService, $rootScope, $scope, $element, $compile, $document){
var ctrl = this;
this.genericAutocompleteSearch = autocompleteService.genericSearch;


function addDirectiveToInputOfAutomplete(id){
var myAutoCompleteInput = angular.element($element[0].querySelector(id));

Answer Source

This proof of concept seems to work - CodePen


<md-autocomplete ... md-input-id="myAutoCompleteInput">

JS - directive

.directive('test', function () {
    return {
        restrict: 'A',
        scope: {
            text: '@text'

JS - controller

$timeout(function () {
  var myAutoCompleteInput = angular.element($element[0].querySelector('#myAutoCompleteInput'));
  myAutoCompleteInput.attr("test", "test");
  myAutoCompleteInput.attr("text", "blah");

In the console you can see that the console.log in the directive outputs "blah". The $timeout in the controller is required to get the md-autocomplete element with the id.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download