Angular: добавление условных атрибутов в HTML

0

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

Чтобы проиллюстрировать: если условие истинно, нужно, чтобы директива1 и директива2 были добавлены как атрибут.

<ng-form class="myForm" directive1 directive2>

и когда условие ложно, я хочу, чтобы директива3 и директива4 были добавлены как атрибут

<ng-form class="myForm" directive3 directive4>

Я попытался сделать условную логику напрямую, но это не сработало:

<ng-form class="myForm" {{ condition ? directive1 directive2 :directive3 directive4 }}>

Есть ли у кого-нибудь предложение сделать это легко?

  • 0
    Является ли вариант использования специально для директивы 1, директивы 2, директивы 3 и директивы 4? Или просто в общем?
  • 0
    @gaheinrichs Я определенно хочу добавить как минимум две директивы, основанные на условии. Эти директивы в основном, чтобы добавить проверки в форме
Теги:

3 ответа

1

Новый ответ

<ng-form class="myForm" ng-attr-directive1="{{condition}}" ng-attr-directive3="{{!condition }}">

ng-attr решит вам случай. Он проверяет условие и добавляет attr к элементу HTML.

СТАРЫЙ

почему вы не можете использовать ng-show в самой директиве. Он проверит condition и появится, только если это правда.

Поделиться
  • 0
    по-видимому, это многократно используемые директивы, созданные для валидации форм, поэтому изменение всех этих директив не будет хорошей идеей для внедрения этого нового условия. Мне просто нужен способ, чтобы иметь возможность ввести их в форму, основанную на условии.
1

Вы можете попробовать обернуть эти директивы в другую директиву. Для этого уже есть ответ:

Добавить директивы из директивы в AngularJS

Я добавляю этот код из другого ответа:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      scope: {
        condition: '='
      },
      priority: 1000,
      link: function link(scope,element, attrs) {
        if(!scope.condition){
             element.attr('directive1', '');
             element.attr('directive2', '');
        }else{
             element.attr('directive3', '');
             element.attr('directive4', '');
        }

        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });
Поделиться
  • 0
    Это, кажется, хорошее предложение! Я, вероятно, подожду, если у кого-нибудь появятся более яркие идеи.
0

Почему бы не использовать ng-if?

<ng-form ng-if="condition" class="myForm" directive1 directive2>
<ng-form ng-if="!condition" class="myForm" directive3 directive4>
Поделиться
  • 0
    Я думал об этом, но проблема в том, что, поскольку ng-if находится в ng-форме, он скрывает всю форму. Обойти это можно, вероятно, дважды дублируя содержимое ng-формы, чего я хочу избежать.
  • 0
    хм, почему бы не создать новую директиву, содержащую логику для ng-формы? Таким образом, это будет только две строки
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню