javascript - 对表单输入使用可重用指令

Question

我刚刚通读了 directive docs而且我仍然不明白如何使用可重用代码完成以下任务。我有多个表单字段，最适合在 select > option 中使用设置，但是由于移动浏览器处理 select 的方式，我希望将其替换为带有模板的指令s(iOS 放大了 option s 并且我的一些值太长而无法在显示中查看)。

所以我的模板看起来像这样:

<div class="list">
    <div class="option" ng-repeat="option in form.questionOneOptions" ng-click="selectOption(option)">
        {{option}}
        <i class="checkIcon" ng-if="option.isSelected"></i>
    </div>
</div>

这将是详细信息页面上的唯一内容。它的父页面是您正在填写的字段列表，这是数据需要可用的地方。我只是不知道从哪里开始指令。每个问题都有一个独立的范围，其中包含该问题的选项。需要有一种方法可以为指令提供选项列表。所有问题都有一个包含范围，可以将记录的答案保存在一个对象中，例如 form .

我知道我可以使用单个 Controller 并复制/粘贴上面的内容并更改 form.questionOneOptions 来完成此操作 Controller 中有一个巨大的对象，但我试图通过将我的 DOM 操作限制为指令来以正确的方式做到这一点。

Answer 1

您需要使用那里的 html 作为指令的模板。然后在链接函数中实现 selectOptions。

app.directive('gsQuestion', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            options: '='
        },

        template:'<div class="list">'+
                   '<div class="option" ng-repeat="option in options" ng-click="selectOption(option)">'+
                    '{{option}}'+
                    '<i class="checkIcon" ng-if="option.isSelected"></i>'+
                 '</div></div>',

        link: function(scope, element, attrs) {
            scope.selectOption = function(option)
            {
                // implement selectOption
            }
        }
    };
});

然后你可以在你的 html 中使用该指令。

<gs-question ng-model="myValue1" options="form.questionOneOptions"></gs-question>
<gs-question ng-model="myValue2" options="form.questionTwoOptions"></gs-question>