Директива AngularJS с иконками iconify не реагирует на изменения переменных области видимости - PullRequest
Новая
       15

Директива AngularJS с иконками iconify не реагирует на изменения переменных области видимости

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

Я нахожусь в процессе преобразования приложения для использования iconify (https://iconify.design/) вместо включения всего удивительного шрифта CSS. Должно быть простой задачей, верно? За исключением того, что я столкнулся с проблемой, где значки внутри директивы не обновляйтесь при изменении области действия.

Сначала я думал, что смогу сделать 

<i class="iconify" data-icon="{{ my_value }}"></i>

в соответствии с предложениями на https://iconify.design/docs/icon-aliases/, и выключите my_value при необходимости. Но это не сработало (даже вне директивы). Поэтому я попытался с двумя иконками, нг-показать их через my_value: 

<i class="iconify" data-icon="this" ng-show="my_value == 'this'"></i>
<i class="iconify" data-icon="that" ng-show="my_value == 'that'"></i>

Но также это не имеет никакого эффекта - и теперь проблема, похоже, ограничивается тем, когда заполнители значков появляются внутри директивы.

Плнкр здесь: https://plnkr.co/edit/7on7CXuaCOUcMsCmQ8rd?p=preview

Полагаю, это как-то связано ... нет, на самом деле у меня нет идей. Итак, как я могу сделать то, что кажется достаточно общей задачей, работой?

1 Ответ

2 голосов
/ 08 марта 2019

Переместите директивы ng-show к элементам, которые включают элемент icon: 

<div>
  <h3>Eye does not toggle (in directive)</h3>
  <button ng-click="style = (style == 'fa-eye' ? 'fa-eye-slash': 'fa-eye')">
    Click
  </button>
  (style is [{{ style }}])
  <br /> Control: <i class="iconify icon:fa-eye"></i>
  <br /> Should toggle:

  <span ng-show="style == 'fa-eye'"> 
     <i class="iconify icon:fa-eye"></i>
  </span>
  <span ng-show="style == 'fa-eye-slash'">
     <i class="iconify icon:fa-eye-slash"></i>
  </span>

</div>

Программное обеспечение Iconify заменяет элемент <i> элементом <svg>. Это приводит к уничтожению директив ng-show.

Работает, если директивы ng-show помещены в родительский элемент.

DEMO на PLNKR

...