Question

我正在尝试创建一个类似于ui-select的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/

选择类似于ui-select的指令

1 个答案: