javascript - 动态 作为 Angular 指令

Question

我使用的是 Sprite 中包含的 SVG 图标，如下所示。

<div class="py-3">
    <svg-icon><src href="sprite.svg#si-glyph-bullet-checked-list"/></svg-icon>
    <span>Tasks</span>
</div>

它工作得很好，但是当我将它重写为 Angular 指令时:

app.directive('ngxTileIcon', function () {
    return function (scope, element, attrs) {
        var tileIcon = attrs['ngxTileIcon'];
        var tileCaption = element.text();
        element.text('');
        element.addClass('py-3');
        element.append(
            $('<svg-icon/>').append(
                $('<src/>').attr('href', 'sprite.svg#si-glyph-' + tileIcon)
            ),
            $('<span/>').text(tileCaption)
        );
    };
});

并使用它:

 <div ngx-tile-icon="bullet-checked-list">Tasks</div>

基本上，我得到了相同的标记，但 Google Chrome 不显示 SVG 元素已添加到 DOM。当使用非 Angular 方法时，确实如此。最后，当使用Angular指令时，图标不显示。

<小时/>

已解决

我只是改变了方法 - 我没有向元素添加标记，而是直接用 html() 替换其内容。现在它按预期工作了。

app.directive('ngxTileIcon', function () {
    return function (scope, element, attrs) {
        var tileIcon = attrs['ngxTileIcon'];
        var tileCaption = element.text();
        var $tempDiv = $('<div/>');
        element.addClass('py-3');
        $tempDiv.append(
            $('<svg-icon/>').append(
                $('<src/>').attr('href', 'sprite.svg#si-glyph-' + tileIcon)
            ),
            $('<span/>').text(tileCaption)
        );
        element.html($tempDiv.html());
    };
});

Answer 1

达米安指出这个答案是错误的，但我会保留它以防止其他人犯同样的错误!

是一个 Angular 指令，而不是原生 HTML 元素，因此使用 jQuery 添加它不会触发 Angular 的逻辑，你什么也没有留下。

一般来说，对于 Angular 1.x(假设您使用的是 1.x？)，您应该为其提供一个模板字段，该字段将根据输入创建图标:

app.directive( "myDirective", function() {
   return {
      template: "<div class='py-3'><svg-icon><src href='sprint.svg#si-glyph-{{ tileIcon }}'></src></svg-icon></div>"
      scope: {
         tileIcon: "<"
      }
   };
});

这应该将“tileIcon”变量绑定(bind)到父元素中提供的属性，然后使用数据绑定(bind)将其注入(inject)模板中，以便它在父元素更新时更新。});