模板中的Angular指令

Question

我正在嘗試在我的應用程序中動態加載指令。 我創建了一個看起來像這樣的模板：

<script type="text/ng-template" id="custom-dir">
  <custom-dir component="dir"></custom-dir>
</script>

這是我在主頁中加載指令的方式：

<section class="page">
    <section class="main-components">
        <div ng-repeat="dir in directives" ng-include="dir.name"></div>
    </section>
</section>

這是dir對象：

{
   name: "path_to_dir/custom-dir.html",
   id: "custom-dir"
}

這是模板path_to_dir/custom-dir.html ：

<script type="text/ng-template" id="root-routing">
  <root-routing component="component"></root-routing>
</script>

這是指令：

  app.directive("rootRouting", [function() {
    return {
      restrict: "E",
      scope: {
        component: "=component"
      },
      replace: true,
      template: "<div></div>",
      link: function($scope, element, $attrs) {
          debugger;
        });
      }
    }
  }]);

當我運行應用程序時，我可以在dom中看到帶有指令的模板。 問題是組件邏輯（在鏈接下）永遠不會運行。 如果我將沒有模板的指令放在主js中，那么一切都會按預期進行。

我的情況怎么了？

Answer 1

檢出此plnkr

您正在模板中創建模板。 將您的custom-dir.html更改為以下內容

  <root-routing component="component"></root-routing>