Call angular UI Bootstrap directive from inside custom directive

Question

currently I'm working on a very extense form and using inputs, textareas, datepickers etc etc on the HTML it will make the code look very ugly and also very hard to read. The thing is that I have created custom directives that returns the proper HTML element eg:

In the HTML

<suggest-input data-ng-model="EDCtrl.headerStep.provider.identification"
               placeholder="'Ej. 888888-8'"
               label="'Identificador de emisor'">
</suggest-input>

the directive :

var suggestInput = function ($compile, $http) {
  return {
     restrict: 'E',
     require: 'ngModel',
     templateUrl: templates + '/suggestInputTemplate.tpl.html',
     replace: true,
     scope: {
         model: '=ngModel',
         label: '=label',
         title: '=title',
         placeholder : '=placeholder'
     },
   };
};

the template

<div>
  <label>{{ label }}</label>
  <input class="form-control" data-ng-model="model" placeholder="{{ placeholder }}" call="functionName()"/>
</div>

and I'm having problems with using a angular bootstrap directive inside my custom directive, for example : How can I call the "uib-typeahead" using this kind of configuration in my custom directives ?

Any ideas ?

Answer 1

You can use any nested directive inside your own one, and angular-ui-boostrap directives are not special in this case. Regarding uib-typeahead you can see the following example on the angular-ui-bootstrap site:

<input type="text" ng-model="asyncSelected" 
   placeholder="Locations loaded via $http" 
   uib-typeahead="address for address in getLocation($viewValue)" 
   typeahead-loading="loadingLocations" 
   typeahead-no-results="noResults" class="form-control">

The only important thing to know is that ngModel is the directive itself and you can access it via link(scope, element, attrs,ngModelController) . ngModelController has $viewValue and $modelValue properties which are representing the bonded value from outer scope. so instead of scope:{model:'=ngModel'} use those variables for bindings inside your directive.