试图transclude选择元素

我试图创建一个指令，被称为选择它将替换选择元素。更确切地说，它隐藏了select元素并显示一个自定义下拉菜单。这里是我试图做到的jsfiddle。试图transclude选择元素

所以，假设以下选择元素：

<select ng-model="selectedOption"> 
    <option ng-repeat="option in options" ng-bind="option.value"></option> 
</select>

现在，这选择指令应transclude此代码到下面的模板：

<section> 
    <div ng-transclude></div> 
    <ol> <!-- custom dropdown/select --> 
     <li ng-repeat="option in options" ng-bind="option.value"> 
    </ol> 
</section>

而且指令：

myApp.directive('select', function() { 
    return { 
     templateUrl: 'view/select.html', 
     restrict: 'E', 
     transclude: true, 
     scope: {}, 
     link: function(scope, element, attrs) {} 
    }; 
});

现在，我看到了几个问题：

的transclude似乎更换整个模板（见jsfiddle）
有一个奇怪的option元素
我怎么绑定的数据，因为我需要创建自定义下拉

希望有人能帮助我在这里！

日Thnx

更新：只是要明确，我想transclude选择元素的原因是因为从魔法。例如，如果用户在自定义下拉列表中选择了一个选项，该指令将在隐藏的本地选择元素中选择此选项。这样，形式东西像$ prestine是up2date

更新2：找到一种方法来做更多或更少我需要的：jsfiddle。但是，我必须现在重命名指令:(它感觉有点像我得到选项数组的方法！

来源

2014-03-05 Jeanluca Scaljeri

您可能想要签出ng-options指令，它可能会提供创建所需内容的提示。ng-options是over ng-repeat的“首选”方式 –

我看不到ngOptions要解决哪个问题？ –

如果从更新2开始，您只需要一个不太痛苦的方式来访问选项数组，考虑将它作为该指令范围的属性

指令：
scope: { name: '@', options: '=' },

HTML：
<selectx name="bar" ng-model="selectedOption" options='options'>

Here is a jsfiddle

或者，您可以创建自定义下拉元素inside the link function，并将它添加到现有的选择元素：
myApp.directive('select', function($compile) { return { restrict: 'E', link: function(scope, element, attrs) { var custom = angular.element('<section>\ <ol>\ <li ng-repeat="option in options" ng-bind="option.value">\ </ol>\ </section>'); custom.insertAfter(element); $compile(custom)(scope); } }; });

看到它在this fiddle。

当然，如果insertAfter没有把它放在你想要的位置，你可以调整原始选择的位置。

来源

2014-03-07 03:53:29

最初的想法是用自定义下拉列表替换选择的元素。添加'options'属性（以及selectx）会远离该想法 –

试图transclude选择元素

回答

相关问题