試圖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選擇元素

回答

相關問題