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 e.g.:

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 ?

Possible duplicate of Angular UI directive inside custom directive — Isaac
– Isaac, Commented Feb 7, 2018 at 2:14

Ihor Korotenko · Accepted Answer · 2017-02-11 20:12:34Z

0

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.

answered Feb 11, 2017 at 20:12

Ihor Korotenko

9061 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Franco Aguilera Over a year ago

sorry about this, but I don't see what you are telling me on your comment, can you please provide an example with angular 1.6 ?

Collectives™ on Stack Overflow

Call angular UI Bootstrap directive from inside custom directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related