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>

在AngularJS中构建模板指令

1 个答案: