Question

我试图创建一个快速的Angular指令，它将使用我发现的jQuery UI扩展生成组合框。

扩展非常简单。我只需要创建一个标准的select元素，然后运行函数＆＃34; combobox（）＆＃34;在上面。我不知道在我的角度指令中该怎么做。

分音/元件/ 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(); });

但当然，由于该指令未及时呈现，因此无法正常工作。有没有办法只在指令完成渲染时才调用它？

谢谢你的时间，安迪

Answer 1

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

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

渲染Angular指令后调用js函数

1 个答案: