Angular 1 如何在 ng-include 中正确包含外部组件？

Question

情况：我有一个视图，其中包含一个带有 ng-include 的片段。该片段在定义控制器的视图内完美加载并按预期工作。 我的问题是，当我想在“ng-include”片段“myView.html”中包含外部组件时，它不会出现。当将它包含在控制器所在的主视图中时，它会按预期显示并工作。

主视图：

<div ng-controller="MyController">
    <div data-ng-include src="'views/myView.html'"></div>

    <!-- When loaded here, the component shows up --> 
    <!-- <div id="componentDiv"></div> -->
</div>

片段“myView.html”：

<div>
    <div id="componentDiv"></div>
</div>

组件加载在“MyController”内部，其中“componentDiv”是放置组件的“div”的“id”：

var testObj = new TestObj({"container": "componentDiv"});

尝试这样做是为了能够在多个地方使用具有完整功能的片段。

有什么想法或建议要查找或尝试吗？

Answer 1

恕我直言，我认为通过说“...能够在多个地方使用具有完整功能的片段”你刚刚回答了你的问题。您需要的是构建一个自定义指令并在您喜欢的任何地方使用它。

参见指令示例，例如Angular documentation on directives