Thomas Zoé Thomas Zoé - 3 months ago 10
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;

addDirectiveToInputOfAutomplete('#my-input');

function addDirectiveToInputOfAutomplete(id){
var myAutoCompleteInput = angular.element($element[0].querySelector(id));
myAutoCompleteInput.attr("my-directive");
$compile(myAutoCompleteInput)($scope);
}
}

Answer

This proof of concept seems to work - CodePen

Markup

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

JS - directive

.directive('test', function () {
    return {
        restrict: 'A',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            console.log(scope.text);
        }
    };
});

JS - controller

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

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.

Comments