使用属性参数作为表单名称

Question

我正在尝试制作通用表格验证指标。如果表单有效，则显示表单有效，否则显示错误表明表单无效。

我正在使用bookingForm.$valid或SOMEFORM.$valid - 但ng-show无效。我认为{{formValid}}与实际表单模型之间的联系是不正确的。

这是我的指示：

sharedServices.directive('formValid', function() {
    return {
        restrict: 'A',
        scope: {
            formValid: '@'
        },
        template: '<div class="alert alert-warning" ng-show="!{{formValid}}.$valid"><b>ATH!</b> Útfylling ekki í lagi</div>' +
                    '<div class="alert alert-success" ng-show="{{formValid}}.$valid"><b>OK!</b> Útfylling í lagi</div>',
        link: function(scope, element, attrs) {
            scope.formValid = attrs.formValid;
        }
    };
});

以下是我的用法：

<div form-valid="bookingForm"></div>
<form name="bookingForm">...</form>

<div form-valid="contactForm"></div>
<form name="contactForm">...</form>

我想将表单名称（模型）传递到我的指令模板中，并相应地显示表单模型上的$ valid是否为true / false。我是否需要编译模板或如何完成此操作？

这是一个GIF，显示它不起作用，bookingForm.$valid在HTML中是正确的，但在指令的模板中始终为false。

Answer 1

由于ng-show创建了新范围，因此您需要访问$parent范围内的表单。在模型分配方面有点棘手。您可以使用attrs.$observe分配对象，而不是$valid的值。

请尝试以下代码：

sharedServices.directive('formValid', function () {
    return {
        restrict: 'A',
        scope: {
            formValid: '@'
        },
        template: '<div class="alert alert-warning" ng-show="!formValid.$valid"><b>ATH!</b> Útfylling ekki í lagi</div>' +
            '<div class="alert alert-success" ng-show="formValid.$valid"><b>OK!</b> Útfylling í lagi</div>',
        link: function (scope, element, attrs) {
            attrs.$observe('formValid', function () {
                scope.formValid = scope.$parent[attrs.formValid];
            });
        }
    };
});

的 DEMO