カスタムディレクティブ内の角度UIブートストラップ指令を

Question

現在私は非常にextensフォームで作業しており、HTMLの入力、textareas、datepickersなどを使用しているので、コードが非常に醜く見えにくくなります。

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

ディレクティブHTMLで

：

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> 

事は、私は適切なHTML要素などを返すカスタムディレクティブを作成していることです

と私は角度ブートストラップディレクティブを使用して問題を抱えています私のカスタムディレクティブの例： カスタムディレクティブでこの種の設定を使用して "uib-typeahead"を呼び出す方法はありますか？

アイデア？

Answer 1

独自のネストされたディレクティブを使用することができます。この場合、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'}これらの変数をあなたのディレクティブ内のバインディングに使用してください。