选择类似于ui-select的指令

Question

我正在尝试创建一个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> 

我怎样才能使我的指令，这里面的模板和应用花式这一点。

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/