Question

所以我看了很多其他类似的问题，并没有找到一个似乎涵盖我正在尝试做的事情。

我在指令中使用模板来创建自定义下拉列表，其中包含搜索框之类的花哨内容。为此，我必须使用template;我不能只将compile与element.replaceWith一起使用（如果我将compile与attrs参数一起使用，我就能使其工作，但随后自定义模板不会工作）。

我想要做的就是根据自定义标记中属性的内容选择一个特定的选项数组：

HTML：<customdropdown useoptionset="first"></customdropdown>

JS：

angular.module('ui.bootstrap', [])

.constant('customdropdownConfig', {
    //bunch of properties here
})

.directive('customdropdown ', ['$parse', 'customdropdownConfig', function ($compile, customdropdownConfig) {
    return {
        restrict: 'EA',
        replace: true,
        template: (function(conf) {
            var optionset = //how can i access the useoptionset attribute here?

            var options = //stuff involving useoptionset and conf

            return '<select ui-select="customDropdown">' + options + '</select>';
        }(customdropdownConfig))
    };
}])

在我看来，这应该是一个非常常见和明显的用例，但也许我对Gibular的工作原理缺失了一些。

Answer 1

尝试使模板更加简单，然后使用链接功能将动态内容添加到<select>元素。

像这样：

.directive('customdropdown ', ['$parse', 'customdropdownConfig', function ($compile, customdropdownConfig) {
    return {
        restrict: 'EA',
        replace: true,
        template: '<select ui-select="customDropdown"></select>',
        link: function(scope, elem, attrs){
            var optionset = attrs.optionset;
            var options = //stuff involving useoptionset and conf
            elem.html(options);
            $compile(elem.contents())(scope);
        }
    };
}]);

听起来你可能已经尝试过了，但我不明白为什么它不起作用。如果它没有，也许你可以对你迄今为止尝试过的内容以及为什么它没有起作用给出更多的解释。

在Angular指令模板中使用自定义标记属性

1 个答案: