Question

我正在尝试创建一个名为 select 的指令，它取代了select元素。更确切地说，它隐藏了select元素并显示了自定义下拉列表。这是jsfiddle，我试着这样做。

因此，假设以下select元素：

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

现在，此 select 指令应将此代码转换为以下模板：

<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

更新：为了弄清楚，我想要转换select元素的原因是因为来自魔法。例如，如果用户在自定义下拉列表中选择一个选项，则该指令将在隐藏的本机选择元素中选择此选项。这样，像$ prestine这样的表单就是up2date

UPDATE2：找到了一种方法来做我或多或少的事情：jsfiddle。但是，我现在必须重命名该指令:(感觉有点像我获得选项数组的方式！

Answer 1

如果从Update2开始，您只想要一种不太讨厌的方式来访问options数组，请考虑将其作为指令范围的属性添加。

指令：
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没有把它放在你想要的位置，你可以调整原始选择的位置。

试图转换一个选择元素

1 个答案: