Question

我想创建一个指令来向表单元素添加警告。

该指令应该在输入＆amp; /或创建form.element。$ warning对象时添加一个.ng警告类。我想创建form.element。$ warning对象，使其与form.element。$ error对象的工作方式类似。

如何创建一个验证值并通过扩展角形内部传递警告的属性指令？

我在这里放了一个插件，作为如何使用它的模板示例。 http://plnkr.co/edit/3LkCZKjdozTPaagDojWi?p=preview

下面的尝试添加了警告类。

app.directive('valMinWarning', function () {
return {
    require: 'ngModel',
    scope:false,
    link: function (scope, elm, attrs, ctrl) {


        //todo: get form name
        //make access warnings via form.$warnings.prop.warning

        var form = scope.weather; 


        var warnings = form.$warnings;

        if (!warnings)
            warnings = form.$warnings = [];

        if (!warnings[attrs.name])
            warnings.push(attrs.name);

        scope.$watch(function() {
            return ctrl.$modelValue;
        }, function (val) {

            //console.log(scope);

            //console.log("Value " + val);
            if (val < attrs.valMinWarning) {
                warnings[attrs.name] = 'true';
                elm.addClass('ng-warning');
            } else {
                warnings[attrs.name] = 'false';
                elm.removeClass('ng-warning');
            }
        });

    }
};
});

是否有类似的方法来添加警告验证？

Answer 1

声明：

下面的代码可以作为学习练习，但是因为它向父作用域添加了一个对象“警告”，所以很俗气。对于更强大的解决方案，通过创建类似于$error对象的东西来扩展角度框架。

使用示例

<input type="text" name="measurement" ng-model="myForm.measurment"
    val-min-warning="-10" val-max-warning="100" />

<span ng-show="warnings.measurement.valMinWarning">
    Warning: Measurement less than -10 </span>   

<span ng-show="warnings.measurement.valMaxWarning">
     Warning: Measurement greater than 100 </span>

指令

angular.module('myApp.directives').directive('valMinWarning', function () {
return {
    require: 'ngModel',
    scope:false,
    link: function (scope, elm, attrs, ctrl) {

        var warningName = 'valMinWarning';

        AttachWarning(scope, elm, attrs.name, ctrl, warningName,
            function (val) { return parseFloat(val) && parseFloat(val) < attrs.valMinWarning; }    );
    }
};
});


angular.module('myApp.directives').directive('valMaxWarning', function () {
return {
    require: 'ngModel',
    scope: false,
    link: function (scope, elm, attrs, ctrl) {
        var warningName = 'valMaxWarning';

        AttachWarning(scope, elm, attrs.name, ctrl, warningName,
            function (val) { return parseFloat(val) && parseFloat(val) > attrs.valMaxWarning; }    );
    }
};
});



var WARNING_CLASS = 'ng-warning';
function AttachWarning(scope, elm, elmName, ctrl, warningName, condition) {
//attach 'warning' to scope
//access input element warnings via
// warnings.[elementName].[warningName]
// eg warnings.name.toManyVowels = true;

var warnings = scope.warnings = scope.warnings || {};

if (!warnings[elmName])
    warnings[elmName] = {};

scope.$watch(function () {
    return ctrl.$modelValue;
}, function (val) {        
    if (condition(val)) {
        warnings[elmName][warningName] = 'true';
        elm.addClass(WARNING_CLASS);
    } else {
        warnings[elmName][warningName] = 'false';
        elm.removeClass(WARNING_CLASS);
    }
});
}

创建指令以向表单输入添加警告

1 个答案: