在AngularJS中构建模板指令

Question

我有这样的HTML块，在代码中重复了大量的时间：

<div>
    <label for="producer">Producer:</label>
    <select id="producer" ng-model="producer" ng-options="producer.name for producer in producers">
        <option value="">-- Choose Producer --</option>
    </select>
</div>

所以我想做一个指令(??)我可以这样做：

<gsBoundSelect gsLabel="Producer:" gsDefaultOption="-- Choose Producer --"
               ng-model="producer" 
               ng-options="producer.name for producer in producers" />

for/id字段可能只是随机生成的字符串。

我一直在阅读指令，但我不太清楚如何做到这一点，这样我就可以传递这样的参数。我看到的示例都希望传入一个绑定作用域变量，而不是一个属性。

看起来我需要一个链接函数和一个模板，但我很困惑如何做到这一点。谢谢。

Answer 1

通过各种书籍找到足够的数据，让一些东西发挥作用。不确定这是否是最好的方法，但它确实有效：

module.directive('gsBoundSelect', function ($compile) {
    function generateUUID() {
        ...
    }

    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var lblId = generateUUID();
            var content = [
                '<div>',
                    '  <label for="' + lblId + '">' + attrs.gsLabel + '</label>',
                    '  <select id="' + lblId + '" ng-model="' + attrs.ngModel + '" ng-options="' + attrs.ngOptions + '">',
                    '    <option value="">-- ' + attrs.gsDefaultOption + ' --</option>',
                '  </select>',
                '</div>'].join('');

            // We need to transform the content into a jqLite object
            var jqLiteElem = angular.element(content);
            $compile(jqLiteElem)(scope);

            element.replaceWith(jqLiteElem);
        }
    };
});

顺便提一句.我发现添加的元素指令必须用完整的标记来结束，而不是我在示例中显示的更短的语法。因此，上面的内容适用于这个HTML：

<gsBoundSelect gsLabel="Producer:" gsDefaultOption="-- Choose Producer --"
           ng-model="producer" 
           ng-options="producer.name for producer in producers">
</gsBoundSelect>