Question

鉴于此标记：

<a href="/" myDirective="Text 1 2 3 Foo">Link</a>

如何使用指令结束此输出？

<a class="tooltip" style="left:<the left pos of the original element>; top:<the top pos of the original element>;">Text 1 2 3 Foo</a>
<a href="/">Link</a>

感谢。

编辑（另一个例子）：

<div myDirective="Text 1 2 3 Foo">
  <ul>
    <li>Bar</li>
  </ul>
</div>

给出：

<a class="tooltip" style="left:<the left pos of the original element>; top:<the top pos of the original element>;">Text 1 2 3 Foo</a>
<div myDirective="Text 1 2 3 Foo">
  <ul>
    <li>Bar</li>
  </ul>
</div>

所以我基本上想要在给定元素之前插入tooltip元素，但是在输出时保留给定元素而不是替换它。

Answer 1

.directive('myDirective', function() {
    return {
                template: "<a class="tooltip" >{{txt}}</a><a href="/">Link</a>",
                restrict : 'A',
                scope: { txt : "@myDirective" },
                replace: true,
            link: function(scope,elm,attrs) {

            }
    }
})

虽然我很确定Angular需要让一个元素替换另一个元素。因此，如果上面的代码不起作用，请使用它（用span填充它）：

.directive('myDirective', function() {
        return {
                    template: "<span><a class="tooltip" >{{txt}}</a><a href="/">Link</a></span>",
                    restrict : 'A',
                    scope: { txt : "@myDirective" },
                    replace: true,
                link: function(scope,elm,attrs) {

                }
        }
    })

干杯，海因里希

<强>更新：按要求的通用方式：

.directive('myDirective', function() {
    return {
                template: '<span bind-html-unsafe="{{tmp}}"></span>',
                restrict : 'A',
                scope: { txt : "@myDirective" },
                replace: true,
            link: function(scope,elm,attrs) {
                scope.tmp = '<'+attrs.tag+' class="tooltip" >{{txt}}</'+attrs.tag+'><a href="/">Link</a>'
            }
    }
})

你的HTML：

<legend myDirective="A Text" tag="legend"></legend>

我看到你是棱角分明的新人，所以要注意这里创建的新范围。如果需要，您可以使用{{$ parent.var}}访问父变量。但你不应该。如果没有太多的话，最好将em作为属性传递。

最终更新 试用@ http://plnkr.co/edit/JSOH0cGcYiJIWsVkB8cP
你可以做的是使用$ compile来做自定义模板。

.directive('directive', function($compile) {
    return {
          restrict : 'A',
          scope: { txt : "@directive" },
          replace: true,
        compile: function compile(elm, attrs, transclude) {
        var e = elm;
        e.removeAttr("directive");

        elm.replaceWith('<span directive="'+attrs.directive+'"><a class="tooltip" href="">{{txt}}</a>'+e[0].outerHTML+'</span>');
            elm.append(e);
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) { 

                },
                post: function postLink(scope, elm, iAttrs, controller) { 
                    $compile(elm.contents())(scope);
                }
            }
        }

    }
});

您的HTML模板：

<div directive="{{text}}">
        <ul><li>list element</li></ul>
    </div>

祝你好运。干杯，海因里希

AngularJS：如何在指令中使用新的兄弟元素返回原始元素？

1 个答案: