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?

Can we see your component definition?

Pop-A-Stash
– Pop-A-Stash

2017-06-02 15:57:50 +00:00
Commented Jun 2, 2017 at 15:57 — Pop-A-Stash
– Pop-A-Stash, Commented Jun 2, 2017 at 15:57

neojg · Accepted Answer · 2017-06-02 21:51:13Z

0

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

answered Jun 2, 2017 at 21:51

neojg

2211 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cYrixmorten Over a year ago

Or perhaps a component

neojg Over a year ago

If you use Angukar 2 or 4 it will be component if you use AngularJS it will be directive.

cYrixmorten Over a year ago

there are components in AngularJS too since 1.5

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related