Question

我正在尝试创建一个非常简单的Angular JS指令，该指令只是用一个SVG图标替换一个标签，该图标将根据name属性而有所不同。所以这......

<icon name="plus" />

可能会被替换为.....

<SVG version="1.1"><path>...</path></SVG>

因为所有基本上都是一个简单的switch语句后跟一个element.replaceWith（），所以它不需要任何$ scope或类似的东西。事实上，一旦它被编译，我宁愿Angular完全忘记它并减少任何内存浪费等。

我的理由是我已经阅读了页面上Angular指令的最大限制，我将使用大量图标，以便减少浪费。

所以基本上我的问题是如何尽可能有效地做到这一点，还是我不应该担心？

非常感谢。

Answer 1

试试这个：

app.directive('icon', function($sce){

  return {
    restrict: 'E',    
    link: function(scope, elm, attrs){
       var file = "svg/" + attrs.name + ".html";
       elm.replaceWith($sce.getTrustedHtml(file));
    }
  }

})

启示

链接功能仅在每个编译过程中运行一次。
编译时？阅读this
没有创建新范围（您在链接函数中看到的范围只是对外部范围的引用）
如果你把它放在转发器内而不是多次加载，因为ng-repeat正在删除并将元素插入DOM。
您必须使用链接函数（而不是编译函数），因为您执行DOM操作

一个简单，高效的Angular JS指令来取代HTML

1 个答案:

启示