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

Question

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);
  }
}

You can use services or pass in variables into an isolated scope to share data. This might be relevant for you. http://stackoverflow.com/questions/15343068/using-angularjs-filter-in-input-element — dwbartz, Aug 30 '16 at 15:31

score 1 · Accepted Answer · answered Aug 30 '16 at 14:09

1

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.

answered Aug 30 '16 at 14:09

camden_kid

12,591
11
52
88

Thank you, but in my case $element[0].querySelector('#my-input') is null. Could that be the case because i work in a component? Furthermore I use the "controller as"-syntax should I $compile the input with $scope or on this? Now both doesn't work – Thomas Zoé Aug 30 '16 at 14:56
@ThomasZoé First thing, when you inspect the element in the browser does the input actually have the id "my-input"? – camden_kid Aug 30 '16 at 14:59
@ThomasZoé It being in a component shouldn't be a problem... Could you add the component (or a simplified version of it) to your question? – camden_kid Aug 30 '16 at 15:04
@ThomasZoé I think if you wrap the code in addDirectiveToInputOfAutomplete in a $timeout it should work. Here's a test - http://codepen.io/camden-kid/pen/zKOkyO?editors=1010 – camden_kid Aug 30 '16 at 15:31
Thank you now the directive is added to the input. Additional I changed myAutoCompleteInput.attr("my-directive"); to myAutoCompleteInput.attr("my-directive", ""); – Thomas Zoé Aug 30 '16 at 15:45
@ThomasZoé Glad to be of help. I learned quite a bit answering your question. :-) – camden_kid Aug 30 '16 at 15:47
Now I have a aftereffect. The md-input-container of the autcomplete doesn't have the class 'md-input-invalid'. I would be grateful if you have a look at http://stackoverflow.com/questions/39243892/md-input-container-of-md-autocomplete-doesnt-get-expected-classes – Thomas Zoé Aug 31 '16 at 08:10

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

1 Answers1