Проверка динамически сгенерированных входных данных внутри div - PullRequest
Новая
       6

Проверка динамически сгенерированных входных данных внутри div

0 голосов
/ 01 марта 2019

Я пытаюсь проверить динамически сгенерированные входные данные, но я не знаю, как это сделать.

Когда я добавляю 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
}

1 Ответ

0 голосов
/ 01 марта 2019

Попробуйте границу: 1px сплошной красный;вместо того, чтобы просто установить цвет границы.Ширина границы по умолчанию равна 0, поэтому просто установить цвет недостаточно

Просто пара придирчиво-субъективных комментариев к стилю:

  • элемент уже является элементом jqLite / jquery,поэтому нет необходимости вызывать angular.element
  • scope.source.editable === истинное назначение может быть сокращено до !! scope.source.editable, если вы действительно хотите, чтобы оно было логическим.
  • Будучи умным, этот тип построения элементов стиля jquery, как правило, является запахом кода в угловых js.Если вы действительно хотите пойти по этому пути, я бы создал автономные директивы для ваших входов и использовал шаблон inputRouter для выбора.Это легче понять, поэтому ваше будущее я поблагодарит вас
  • {true: 'has-error'} [conditionItem.field.hasError] заняло у меня минуту.Просто напишите его как {conditionItem.field.hasError: 'has-error'}

Я большой поклонник этих руководств по стилю для AngularJS:

Есть совпадения, но берите то, что вам нравится от каждого.

...