[英]Call angular UI Bootstrap directive from inside custom directive
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. 目前我正在研究一种非常夸张的形式,并在HTML上使用输入,textareas,datepickers等等,这将使代码看起来非常难看,也很难阅读。 The thing is that I have created custom directives that returns the proper HTML element eg:
问题是我创建了自定义指令,返回正确的HTML元素,例如:
In the HTML 在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 ? 我在自定义指令中使用角度引导指令时遇到问题,例如:如何在自定义指令中使用这种配置调用“uib-typeahead”?
Any ideas ? 有任何想法吗 ?
You can use any nested directive inside your own one, and angular-ui-boostrap
directives are not special in this case. 您可以在自己的指令中使用任何嵌套指令,而
angular-ui-boostrap
指令在这种情况下并不特殊。 Regarding uib-typeahead
you can see the following example on the angular-ui-bootstrap
site: 关于
uib-typeahead
你可以在angular-ui-bootstrap
网站上看到以下示例:
<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)
. 唯一需要知道的是
ngModel
是指令本身,您可以通过link(scope, element, attrs,ngModelController)
访问它。 ngModelController has $viewValue
and $modelValue
properties which are representing the bonded value from outer scope. ngModelController具有
$viewValue
和$modelValue
属性,这些属性表示来自外部作用域的绑定值。 so instead of scope:{model:'=ngModel'}
use those variables for bindings inside your directive. 所以代替
scope:{model:'=ngModel'}
将这些变量用于指令内的绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.