Angular 1 how to properly include external component inside ng-include?

Question

Situation: I have a view where I'm including a fragment with ng-include. The fragment loads perfectly and works as expected when inside view where controller is defined. My problem is, that when I want to include external component inside the "ng-include" fragment "myView.html", it doesn't show up. When including it inside the main view where the controller is, it shows up and works as expected.

Main view:

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

Fragment "myView.html":

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

The component is loaded inside the "MyController", where "componentDiv" is the "id" of "div" where the component is placed:

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

Trying to do this to be able to use this fragment with full functionality in several places.

Any ideas or suggestions what to look up or try?

Answer 1

IMHO I think that by saying "...to be able to use this fragment with full functionality in several places" you just answered your question. What you need is to build a custom directive and use it in any place you like.

see directive samples e.g. Angular documentation on directives