Question

我想将以下代码转换为指令：

<object type="image/svg+xml" data="../images/icons/apple.svg" class="icon"></object>

所以我可以这样称呼：

<sicon type="apple"></sicon>
<sicon type="banana"></sicon>
<sicon type="orange"></sicon>

我试过了：

  .directive('sicon', function(){
    return{
      restrict: 'E',
      scope:{
        type: '=type'
      },
      template: '<object type="image/svg+xml" data="../images/icons/'+type+'.svg" class="icon"></object>'
    };
  })

但没有工作

Answer 1

您应该在指令中使用template函数。无需将值放在隔离范围内，因为它似乎是一个硬编码值

template: function(ele, attrs){
   return '<object type="image/svg+xml" data="../images/icons/'+attrs.type+'.svg" class="icon"></object>'
}

对于隔离范围的动态值，它将在下面看

template: '<object type="image/svg+xml" data="{{\'/images/icons/\'+type+\'.svg}}" class="icon"></object>'

AngularJS指令接受参数

1 个答案: