Question

我正在尝试构建一个指令，允许我在需要元素时将更改应用于一组HTML元素。具体来说，如果元素是必需的，它应该对标签应用“required”类，对输入应用“required”属性。使用我发现的样本，我有一个开始，但我被卡住了。

我遇到的问题是确定是否需要特定输入的数据在范围内，并根据购物车中的内容进行更改（即，如果购物车中只有数字产品，则不需要送货地址）。

这是我的工作样本，它工作正常，但我不知道如何/在何处访问范围，因此我可以有条件地应用所需的属性。

指令：

app.directive('setRequired', function ($compile) {
    return {
        restrict: 'A',
        terminal: true,
        priority: 1000, 
        compile: function compile(elem, attrs) {

            // TO_DO - look at the configuration values from
            // the scope to determine if the element is required.
            // How and where do I get access to the scope??

            // Add required class to the label, if found
            var label, labelNg;
            label = elem[0].querySelector("label");
            if (label) {
                labelNg = angular.element(label);
            }

            if (labelNg) {
                labelNg.addClass("required");
            }

            // Add the required property to the first input element, if found
            var input, inputNg;
            input = elem[0].querySelector("input");
            if (input) {
                inputNg = angular.element(input);
            }

            if (inputNg) {
                if (!inputNg.prop("required")) {
                    inputNg.prop('required', true);
                }
            }

            elem.removeAttr("set-required");

            return {
                pre: function preLink(scope, iElement, iAttrs, controller) { },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $compile(iElement)(scope);
                }

            };
        }
    };
});

HTML：

<div class="form-group" set-required>
    <label translate>Address</label>
    <input name="address_1" type="text" ng-model="customer.address_1">
</div>

AngularJS有条件地在指令中设置输入

0 个答案: