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

【问题标题】：AngularJS - jquery plugin SelectBoxIt after ng-options finish populating selectAngularJS - ng-options 完成填充选择后的 jquery 插件 SelectBoxIt
【发布时间】：2013-11-21 17:16:03
【问题描述】：

我正在使用 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 框。

SELECT 的硬编码版本可以正常工作，因为我在控制器底部对 SelectBoxIt 进行了初始化，用于处理页面的这一部分：

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

我现在认为 SelectBoxIt 初始化是在角填充的 SELECT 框完成填充之前发生的。

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

任何帮助将不胜感激。

更新

我将插件调用重新实现为指令。它确实有效。它以 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');
        }
    };
});

【问题讨论】：

控制器不应该用于 DOM 操作，一般做法是从指令初始化外部插件。可能必须从插件的回调中更新范围模型，并使用$apply，因为 angular 不会观看事件
一个简单的超时可能会起作用（类似于$timeout(initPlugin)），但我当然希望 angular 有一个 init 事件，用于您可以收听的指令。

标签： javascript jquery angularjs

【解决方案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');

【讨论】：

if there is some event that you can listen to once your select box is populated，这正是需要的，ng-options完成渲染的事件。

【解决方案2】：

一种方法是观察模型，然后在下一个摘要周期触发一个事件。

scope.$watch(model, function() {
    scope.$evalAsync(function() {
        // event
    });
});

我已经在这里正确地写了这个：Detect when ng-options has finished rendering。

【讨论】：

【解决方案3】：

我在这里解决了部分问题，可能对某些人有用，在指令中使用 $timeout。虽然这对我来说解决了呈现选项的问题，但不幸的是，在撰写本文时，我无法让它们发挥作用！

.directive('fancySelect', function($timeout) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
     $timeout(function() {
        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');
    }
  }, 0);
};

});

【讨论】：