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 中看到带有指令的模板。问题是组件逻辑（在 link 下）从不运行s。如果我将没有模板的指令放在主 js 中，一切都会按预期工作。

我的场景有什么问题？

Answer 1

检查这个 plnkr

您正在您的模板中创建模板。将您的自定义-dir.html更改为关注

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

Angular 模板中的指令

Angular directive within a template

javascript

html

angularjs

templates

angularjs-directive