ui-selectと同様のディレクティブを選択します。

Question

選択ディレクティブを作成しようとしています。tatはui-selectと似ています（学習目的のためにホイールを再作成します）。

私はselectディレクティブ内でテンプレートをレンダリングしようとしていましたが、それは起こっていません。 JSFIDDLE UPDATE 4

テンプレートを親ディレクティブの外側でレンダリングすると、その作業が正常に動作します。良い。 JSFIDDLE UPDATE 3

<select-directive class="myInput" placeholder="type a name here"> 
<select-template ng-repeat="option in names"> 
    <span ng-bind-html="option.firstName"></span> 
    <span ng-bind-html="option.lastName"></span> 
    <span ng-bind-html="option.designation"></span> 
</select-template> 

どのように私は私のディレクティブ内でこのテンプレートをレンダリングし、それにスタイリングを適用することができます。

Answer 1

あなたの指示をtranscludeに追加する必要があります。 Transcludeでは、ディレクティブの子をテンプレートに挿入することができます。

myapp.directive('selectDirective', function() { 
    return { 
    templateUrl: 'select', 
    transclude: true, 
    link: function(scope, element, attribute) { 
     scope.class = attribute.class; 
     scope.placeholder = attribute.placeholder 
     scope.options = attribute.options 
    } 
    } 
}); 

、テンプレートで：

<script type="text/ng-template" id="select"> 
    <input type="text" class="{{class}}" placeholder="{{placeholder}}"> 
    <ng-transclude></ng-transclude> 
</script> 

フィドル：https://jsfiddle.net/een9tvfn/