javascript - 在 div 中验证动态生成的输入

Question

我正在尝试验证动态生成的输入，但我不知道该怎么做。

当我添加触发指令并动态插入输入的 div 时，div 添加了“has-error”类，但不应用输入样式，任何人都知道最好的方法去做我想做的事？

这是标记:

<div ng-if="conditionItem.field.id"
     ng-class="{true: 'has-error'}[conditionItem.field.hasError]"
     dynamic
     input-router
     source="conditionItem.field"
     ng-click="FieldConditionsCtrl.valueTest(conditionItem.field.hasError)"
     ng-required="true"
     ng-model="conditionItem.situation[$index]">
</div>

这是如何生成输入的指令:

(function() {
  'use strict';

  angular
    .module('applicationInputs', ['rzModule', 'focus-if', 'ui.utils.masks'])
      .directive('inputRouter', inputRouter);

    /** @ngInject */
    function inputRouter($compile){
        return {
            restrict: 'EA',
            scope: {
                ngModel: '=',
                source: '=',
                placeholder: '@',
                tabIndex: '='
            },
            link: function(scope, element, attrs) {
                var canvas = angular.element(element[0]);
                scope.source.editable = angular.isUndefined(scope.source.editable) ? true : scope.source.editable === true;

                //used by setting to override selected field
                if (angular.isDefined(attrs.dynamic)) {
                    scope.$watch('source', function () {
                        var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
                        canvas.children().detach();
                        canvas.append($compile(html)(scope));
                    });

                } else {
                    var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
                    canvas.append($compile(html)(scope));
                }
            }
        }
    }
})();

这是我的风格:

.has-error {
     border-color: red
}

Answer 1

尝试边框:1px纯红色；而不仅仅是设置边框颜色。边框宽度默认为0，所以仅仅设置颜色是不够的

还有一些挑剔的主观风格评论:

• 元素已经是一个jqLit​​e/jquery元素，所以不需要调用angular.element
• scope.source.editable === true 赋值可以缩短为 !!scope.source.editable 如果你真的希望它是一个 bool 值。
• 虽然聪明，但这种 jquery 风格的元素构建通常是 angular js 中的代码味道。如果你真的想走这条路，我会为你的输入构建独立的指令并使用 inputRouter 的模板来选择。它更容易理解，所以你 future 的自己会感谢你
• {true: 'has-error'}[conditionItem.field.hasError] 花了我一分钟时间。写成 {conditionItem.field.hasError: 'has-error'}

我非常喜欢这些 AngularJS 风格指南:

• John Papa - ES5，但是很好的建议
• Todd Motto - ES6+

有重叠，但可以从中取你喜欢的东西。