2017-02-11 130 views
1

當前我正在使用非常強烈的形式,並在HTML上使用輸入,textareas,datepickers等,這會使代碼看起來非常難看,也很難閱讀。 的事情是,我創建了返回正確的HTML元素如自定義指令:從自定義指令中調用角度UI引導指令

在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」?

任何想法?

+0

[自定義指令中的Angular UI指令]的可能重複(https://stackoverflow.com/questions/48654008/angular-ui-directive-inside-custom-directive) – Isaac

回答

0

您可以在自己的嵌套指令中使用任何嵌套指令,在這種情況下angular-ui-boostrap指令不是特殊的。關於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"> 

知道的唯一重要的事情是ngModel是指令本身,你可以通過link(scope, element, attrs,ngModelController)訪問它。 ngModelController具有$viewValue$modelValue屬性,它們表示來自外部作用域的綁定值。所以而不是 scope:{model:'=ngModel'}使用這些變量在您的指令中進行綁定。

+1

對不起,但我沒有看到你在評論中告訴我什麼,你能舉出一個角度爲1.6的例子嗎? – flaalf