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

Question

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

当我添加触发指令并动态插入输入的 div 时，div 添加 'has-error' class 但 不适用输入样式，有人知道我正在尝试做的最好的方法吗？

这是标记：

<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，所以只设置颜色是不够的

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

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

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

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

有重叠，但各取所需。

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

Validate dynamically generated inputs inside a div

javascript

angularjs

angularjs-directive