模板中的 Angular 指令答案

【问题标题】：Angular directive within a template模板中的 Angular 指令
【发布时间】：2015-01-12 07:39:24
【问题描述】：

我正在尝试在我的应用程序中动态加载指令。我创建了一个看起来像这样的模板：

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

这里是目录对象：

{
   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 中，那么一切都会按预期工作。

我的方案有什么问题？

【问题讨论】：

标签： javascript html angularjs templates angularjs-directive

【解决方案1】：

查看此plnkr

您正在模板中创建模板。将您的 custom-dir.html 更改为以下

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

【讨论】：