4

鉴于此标记：

<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>

所以我本质上想在给定元素之前插入工具提示元素，但在输出时保留给定元素而不是替换它。

4

1 回答 1

2 
.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 需要一个元素替换另一个元素。因此，如果上面的代码不应该工作使用这个（用跨度包装它）：

.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>

我看到你是 Angular 的新手，所以请注意这里创建的新范围。如果需要，您可以使用 {{$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>

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

于 2013-05-24T11:28:51.270 回答