从自定义指令内部调用有角UI Bootstrap指令 [英] Call angular UI Bootstrap directive from inside custom directive

问题描述

目前，我正在处理一个非常庞大的表单，并在HTML上使用输入，文本区域，日期选择器等，这会使代码看起来非常难看，也很难阅读。
问题是我创建了自定义指令，该指令返回正确的HTML元素，例如：

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

在HTML中

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

指令：

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'
     },
   };
};

模板

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

我在自定义指令中使用角度引导指令时遇到问题，例如：
如何在自定义指令中使用这种配置来调用 uib-typeahead？

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 ?

任何想法？

推荐答案

您可以在自己的嵌套指令中使用任何嵌套指令，而 angular-ui-boostrap 指令并不特殊在这种情况下。关于 uib-typeahead ，您可以在 angular-ui-bootstrap 网站上看到以下示例：

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">

唯一要知道的是 ngModel 是指令本身，您可以通过 link（scope，element，attrs，ngModelController）访问它。 ngModelController具有 $ viewValue 和 $ modelValue 属性，这些属性表示外部作用域的绑定值。因此，请使用
scope：{model：’= ngModel’} 来代替这些变量在指令中进行绑定。

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.

这篇关于从自定义指令内部调用有角UI Bootstrap指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！