Include Angular Directives into a custom made directive

Question

I'm using an awesome, custom-made autocomplete directive called Almighty-Autocomplete . However I'm missing some functionality.

The general directive looks like:

.directive('autocomplete', function () {
 var index = -1;

 return {
   restrict: 'E',
   scope: {
     searchParam: '=ngModel',
     suggestions: '=data',
     onType: '=onType',
     onSelect: '=onSelect'
   },
   controller: ['$scope', function ($scope) {...}
   link: function (scope, element, attrs) {

     var attr = '';

     // Default atts
     scope.attrs = {
       "placeholder": "start typing...",
       "class": "",
       "id": "",
       "inputclass": "",
       "inputid": ""
     };
   } ....

The template looks like:

<div class="autocomplete {{ attrs.class }}" id="{{ attrs.id }}">
<input
    type="text"
    ng-model="searchParam"
    placeholder="{{ attrs.placeholder }}"
    class="{{ attrs.inputclass }}"
    id="{{ attrs.inputid }}"/>
</div> 

I'm not yet savvy enough to add my own stuff into the directive. So I'd like to know how can I add the Angular directives ng-blur and ng-focus into the autocomplete directive , so that when I use it

<autocomplete ng-model="truck.license.number" 
              attr-placeholder="VD 102 203" data="placa_numeros"
              on-type="updateNumeros"
              on-select="select"
              ng-blur="offFocus()"
              ng-focus="onFocus()">
</autocomplete>

I can have ng-blur and ng-focus perform a function.

Answer 1

Those angular directive were meant to be used with specific HTML elements not any elements. For example if you reivew the documentation for ngFocus it will tell you that it was meant to be in use in :

window, input, select, textarea, a

So in order to used those directives in your custom directive instead of using " autocomplete " as element you will need to use one of the elements above.