2016-05-24 22 views
0

我正在嘗試創建一個select指令,它類似於ui-select(重新發明輪子,用於學習目的)。選擇類似於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> 

我怎樣才能使我的指令,這裏面的模板和應用花式這一點。

回答

0

你需要添加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/

+0

文本合併上下。你能更新爲什麼是這樣嗎? –

+0

同樣的問題在你的小提琴版本3上可見https://jsfiddle.net/alaksandarjesus/jsofs4gm/3/,所以我以爲你出於某種原因想要這樣。無論如何,它不在這個問題範圍之內,如果你想回答這個問題,你可以問另一個問題。 – sielakos