如何在 angular JS 中用另一个 svg 图标动态替换 svg 图标？

Question

我正在使用专用框架，其中调用 svg 图标的唯一可能性是通过放置图标的路径，即：

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

我很好奇是否有可能将图标动态替换为另一个图标。我试图引用一个变量并从 angular 端更改其路径，但即使路径更改，图标也不会被替换。

svg-icon={{vm.blockIconPath}}

if (item.BlockNewWorkOrder == true) 
   self.blockIconPath = "common/icons/cmdSubmit24.svg"; 
else 
   self.blockIconPath = "common/icons/cmdStop24.svg";

是否因为 svg 图标是在页面生命周期开始时加载的？

来自 Framework 文档中心的其他上下文：

name	type	description
svg-icon	string	SVG icon to be displayed for the command button.
cmd-icon	string	Command svg icon to be displayed for the command button. This is used only if the svg-icon is not provided.
sit-icon	string	One or more CSS classes corresponding to the icon to display for the command button. This is used only if both svg-icon and cmd-icon are not specified. (default: fa-cogs)

Answer 1

如果你只有两个条件，那么你可以像这样简单地使用 ng-if:

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       ng-if="vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdSubmit24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
    <sit-command 
       ng-if="!vm.BlockNewWorkOrder"
       svg-icon="common/icons/cmdStop24.svg"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

Answer 2

由于唯一的可变项是图标源，因此这会更简洁一些：

<sit-command-bar sit-type="action" sit-layout="vertical">
    <sit-command 
       svg-icon="common/icons/{{ vm.BlockNewWorkOrder ? 'cmdSubmit24.svg' : 'cmdStop24.svg'}}"
       sit-name="customcommand.stop"
       sit-tooltip={{vm.btnBlockText}}
       ng-click="vm.blockButtonHandler"
       sit-label={{vm.btnBlockText}}
       ng-show="vm.isButtonVisible"></sit-command>
</sit-command-bar>

如何在 angular JS 中用另一个 svg 图标动态替换 svg 图标？

How to dynamically replace svg icon with another svg icon in angular JS?

html

javascript

svg

angularjs