javascript - AngularJS - ng-options 完成填充选择后的 jquery 插件 SelectBoxIt

Question

我使用 AngularJS 使用以下代码填充选择框:

<select ng-model="department" 
        ng-options="dept as dept.name for dept in departmentList" 
        class="fancy">
    <option value="">-- select an option --</option>
</select>

但我需要使用 SelectBoxIt jquery 插件呈现此选择框。

硬编码版本的 SELECT 工作得很好，因为我在处理页面此部分的 Controller 底部初始化了 SelectBoxIt:

$targetSelects.selectBoxIt({
            theme: "bootstrap"
            , downArrowIcon: "arrow"
            , showFirstOption: false
        });
        $targetSelects.on({
            "open" : onOpen
            , "close" : onClose
        });

我现在认为 SelectBoxIt 初始化是在按 Angular 填充的选择框完成填充之前发生的。

这看起来有可能吗？如果是这样，我该如何解决这个问题？我认为这可能是使用延迟对象的情况，但我不确定在哪里注入(inject)它。

如有任何帮助，我们将不胜感激。

更新

我将插件调用重新实现为指令。它确实有效。它将下拉列表初始化为 SelectBoxIt 选择框，但它仍在 Angular 使用 ng-options 填充下拉列表之前完成......

.directive('fancySelect', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var $targetSelects = $(element),
                selectConfig = {
                    theme: "bootstrap",
                    downArrowIcon: "arrow",
                    showFirstOption: false
                };

            function onOpen(event){
                $(this).data("selectBox-selectBoxIt").downArrow.addClass("drop-up");
                log('onOpen');
            }

            function onClose(event){
                $(this).data("selectBox-selectBoxIt").downArrow.removeClass("drop-up");
                log('onClose');
            }

            $targetSelects.selectBoxIt(selectConfig);
            $targetSelects.on({
                "open" : onOpen,
                "close" : onClose
            });
            $targetSelects.selectBoxIt('refresh');
        }
    };
});

Answer 1

如果您没有使用 Angular.js，则可以使用 populate 选项将选项添加到 SelectBoxIt 下拉列表中:http://gregfranko.com/jquery.selectBoxIt.js/#PopulateOptions

由于您使用的是 Angular，如果填充选择框后您可以监听某些事件，那么您可以调用 SelectBoxIt refresh() 方法来更新下拉列表，如下所示:

    // Once your original select box is populated
    $('select').selectBoxIt('refresh');