带有图标的AngularJS指令不响应作用域变量的更改
带有图标的AngularJS指令不响应作用域变量的更改
提问于 2019-03-08 23:41:55
我正在转换一个应用程序以使用图标(https://iconify.design/)，而不是包括整个字体-可怕的CSS。应该是一项简单的任务，对吧？除了我遇到了一个问题，指令中的图标在作用域更改时不会更新。
我一开始以为我可以
<i class="iconify" data-icon="{{ my_value }}"></i>根据https://iconify.design/docs/icon-aliases/上的建议，并根据需要关闭my_value。但这并不起作用(即使是在指令之外)。所以我尝试了两个图标，ng-通过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>但同样，这也没有效果--现在问题似乎仅限于图标占位符出现在指令中的时候。
Plnkr地址：https://plnkr.co/edit/7on7CXuaCOUcMsCmQ8rd?p=preview
我猜这和..不，实际上我不知道。那么，我如何才能让看起来足够普通的任务工作起来呢？
回答 1
Stack Overflow用户
发布于 2019-03-09 02:25:29
将ng-show指令移动到包含图标元素的元素：
<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软件将用<svg>元素替换<i>元素。这会导致ng-show指令被销毁。
如果将ng-show指令放在父元素上，它就会起作用。
The DEMO on PLNKR
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55066521
复制相关文章
相似问题
腾讯云开发者
