0

因此，我查看了许多其他类似的问题，但没有找到一个似乎涵盖了我正在尝试做的事情。

我在指令中使用模板来创建自定义下拉菜单，其中包含搜索框等花哨的东西。为此，我必须使用template; 我不能只使用compilewith 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))
    };
}])

在我看来，这应该是一个非常常见且明显的用例，但也许我错过了有关 Angular 工作原理的一些内容。

4

1 回答 1

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

听起来您可能已经尝试过了，但我不明白为什么它不起作用。如果没有，也许你可以给出更多解释，说明到目前为止你已经尝试过什么以及为什么它没有奏效。

于 2013-10-22T02:07:20.357 回答