1

我得到了一个指令，transclude: element我想将模板应用于带有 ng-options 的选择元素，以使用给定的模板包装选择。

app.directive("ngSelect", function(){
  return {
  restrict: "A",
  replace:true,
  transclude: 'element',
  templateUrl: function(elem,attrs) {
     return 'select.html';
  },
  ...
  compile: function compile(cElement, cAttrs, cTransclude) {
    return{
      pre: function preLink(scope, aElement, aAttrs, aController){

      },
      post: function postLink(scope, aElement, aAttrs, aController){

      }
    }

用法：

<select ng-select ng-label="Select 2" ng-model="data.select2" required ng-options="item.id as item.value for item in list"></select>

但是由于某种原因，被包装的是来自 ng-options 的选项，而不是 select 本身，正如您在此处的最终 DOM 中看到的那样。

  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2  ..."> 
     <option value="?"selected="selected"></option>
     <option value="number:1" label="value1">value 1</option>
     <option value="number:2" label="value 2">value2</option>
     <option value="number:3" label="value 3">value</option>
  </div>

我认为选择元素在嵌入的某个点被删除，但我不太确定。我发现ngOptions的tranclude: element只是有点混乱。

我怎样才能让这个选择与tranclude: elementand一起正常工作ngOptions？我可以在编译/前/后链接功能中做些什么吗？

笨蛋。

4

0 回答 0