Question

我想编写自己的指令，它可以使用传递的参数包装超链接中的任何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>

有人知道这有什么问题吗？

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

那样包装你的元素

在超链接

1 个答案: