Angularjs使用ng-options转换元素

时间:2015-08-06 13:16:39

标签: angularjs drop-down-menu angularjs-directive angularjs-ng-options angularjs-ng-transclude

我得到了transclude: element的指令,我希望将模板应用于带有ng-options的select元素,以使用给定的模板包装select。

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>

我认为在转换的某个时刻删除了选择元素,但我并不确定。我发现ngOptionstranclude: element tranclude: element有点令人困惑。

如何让此选择与ngOptions$ awk 'prev && id!=$1 {print prev} {prev=$0; id=$1} END {print prev}' a 10 2,63 20 3,15 一起正常使用?我可以在编译/前/后链接功能中执行某些操作吗?

Plunker

0 个答案:

没有答案