javascript - AngularJS：如何将指令编译为另一个指令？

Question

我有编译的 Angular 指令

1. <greeting />到<print-greeting />和

2. <print-greeting />至Hello World!

我怎样才能把greeting标签放在我的 HTML 中并让它编译到print-greeting最后显示Hello World!？它目前在变成 后停止print-greeting。

这是我的代码：Plunker。

---

从上述 plunker 复制的指令：

greeting指示

// Transforms <greeting /> into <print-greeting />
app.directive("greeting", function ($compile) {
  return {
    restrict: 'E',
      priority: 2,
      compile: function ($templateElement, $templateAttributes) {

      var template = '<print-greeting />';
      $templateElement.replaceWith(template);

      return function LinkingFunction($scope, $element, $attrs) { };
    }
  };
});

print-greeting指示

// Transforms <print-greeting /> into "Hello World!"
app.directive("printGreeting", function ($compile) {
  return {
    restrict: 'E',
    priority: 1,
    compile: function ($templateElement, $templateAttributes) {
      var template = 'Hello World!';
       $templateElement.replaceWith(template);

       return function LinkingFunction($scope, $element, $attrs) { };
     }
  };
});

Answer 1

您正在对已编译的模板进行更改。为了使辅助指令被编译，您需要重新编译：

return function LinkingFunction($scope, $element, $attrs) {
    $compile($element);
};

你的 Plunker 的前叉