渲染Angular指令后调用js函数

debugcn 发表于 Dev

阿普巴拉特

我正在尝试创建一个快速的Angular指令，该指令将使用找到的jQuery UI扩展生成组合框。

扩展非常简单。我只需要创建一个标准的select元素，然后在其上运行函数“ combobox（）”即可。我不确定在我的角度指令中该在哪里做。

partials / elements / combobox.html

<select class="dropdown" ng-options="option as option for option in selectOptions" ng-model="selectModel" />

app-directives.js

appDirectives.directive('combobox', function() {
    return {
        restrict: 'E',
        templateUrl: 'partials/elements/combobox.html',
        scope: {
            selectModel: "=model",
            selectOptions: "=options"
        }
    };
});

在我看来

<combobox model="query.favouriteFruit" options="fruits"></combobox>

我不确定应该在哪里调用.combobox（）。我尝试这样做：

$(function() { $("combobox select").combobox(); });

但是，这当然是行不通的，因为该指令未及时呈现。只有在指令完成渲染后，才可以调用它吗？

谢谢你的时间，安迪

维奈K

您可以在指令的链接函数中处理该逻辑。

appDirectives.directive('combobox', function($timeout) {
    return {
        restrict: 'E',
        templateUrl: 'partials/elements/combobox.html',
        scope: {
            selectModel: "=model",
            selectOptions: "=options"
        },
        link: function (scope, element, attrs) {
            // wait till the initial digest cycle is triggered. 
            $timeout(function () {
                // change the select to combobox
                element.combobox(); 
            });
        }
    };
});