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框。

SELECT的硬編碼版本工作正常，因為我在控制器底部的SelectBoxIt初始化處理頁面的這一部分：

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

我現在認為SelectBoxIt初始化發生在角度填充的SELECT框完成填充之前。

這看起來有可能嗎？ 如果是這樣，我該如何解決這個問題呢？ 我認為這可能是使用Deferred對象的情況，但我不知道在哪里注入它。

任何幫助，將不勝感激。

更新

我重新實現了插件調用作為指令。 它確實有效。 它啟動下拉菜單作為SelectBoxIt選擇框，但它仍然在角度已使用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');

Answer 2

一種方法是觀察模型，然后在下一個摘要周期中觸發事件。

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

我在這里正確地寫了這個： 檢測ng-options何時完成渲染 。

Answer 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);
};

}）;