在超链接中包装 html 元素的指令答案

【问题标题】：Directive to wrap html element in hyperlink在超链接中包装 html 元素的指令
【发布时间】：2018-07-29 16:31:00
【问题描述】：

我想编写自己的指令，它可以使用传递的参数将任何 html 元素包装在超链接中，例如：

<button myDirective="parameter">...</button>

会有以下效果

<a href="url/parameter"><button>...</button></a>

我是 AngularJS 的初学者。不幸的是，我没有找到任何有用的教程来制作 typescript。

我是这样创造的：

export default class LinksHelperDirective implements ng.IDirective {
public static Name = "kb-link";
public restrict = "A";
public urlTemplate = "";

constructor(private readonly $parse: ng.IParseService) {
}

public static Factory() : any {
    const directive = ($parse: ng.IParseService) => {
        return new LinksHelperDirective($parse);
    };

    directive["$inject"] = ["$parse"];
    return directive;
}

link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes,
    ngModel: ng.INgModelController) => {
    const linkId = this.$parse(attrs["kb-link"])(scope);
    const wrapper = angular.element('<a href="https://support/' + linkId + '"></a>');
    element.wrap(wrapper);
};

}

但不幸的是它不起作用......甚至没有调用构造函数。我在索引文件中注册了指令，如下所示：

module.directive(LinksHelperDirective.Name, LinksHelperDirective.Factory(), ["$parse"]);

在html文件中：

<button kb-link="1234">Help</button>

有人知道这是怎么回事吗？

【问题讨论】：

指令是否必要？为什么不<a type="button" href="..."> ... </a>？
是的，这是必要的。我希望有可能包装任何元素。在我看来，它在代码中看起来更好，并且更容易维护，因此指令是正确的选择。
我会选择带有内容嵌入的组件。它更干净
@toskv 我不太明白你的意思。
@PiotrP 这里是content wrapping example 和content transclusion example

标签： angularjs typescript angularjs-directive angularjs-scope

【解决方案1】：

您需要为此使用ng-transclude 指令

class WrapDirective {
  restrict = 'E';
  transclude = true;
  scope = { someLink: '<' };
  template: '<a ng-href="url/{{ someLink }}"><ng-transclude></ng-transclude></a>';
}

但是你需要像<wrap-directive some-link="$ctrl.link"><button>...</wrap-directive>一样包装你的元素

【讨论】：