Angular 1 如何在 ng-include 中正确包含外部组件?
Angular 1 how to properly include external component inside ng-include?
情况:我有一个视图,其中包含一个带有 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"});
尝试这样做是为了能够在多个地方使用具有完整功能的此片段。
有什么要查找或尝试的想法或建议吗?
恕我直言,我认为通过说“...能够在多个地方使用具有完整功能的片段”,您只是回答了您的问题。您需要的是构建自定义指令并在您喜欢的任何地方使用它。
查看指令示例,例如Angular documentation on directives
情况:我有一个视图,其中包含一个带有 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"});
尝试这样做是为了能够在多个地方使用具有完整功能的此片段。
有什么要查找或尝试的想法或建议吗?
恕我直言,我认为通过说“...能够在多个地方使用具有完整功能的片段”,您只是回答了您的问题。您需要的是构建自定义指令并在您喜欢的任何地方使用它。
查看指令示例,例如Angular documentation on directives