从自定义指令内部调用有角UI Bootstrap指令

问题描述

目前，我正在处理一个非常庞大的表单，并在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指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！