CODEWITHSUNDEEP
angularjsangular-material
Thomas Zoé
Thomas Zoé

Reputation: 423

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

Upvotes: 2

Views: 803

Answers (1)

camden_kid
camden_kid

Reputation: 12813

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.

Upvotes: 1

Related Questions