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>

模板中的Angular指令

1 个答案: