Emily Coleman Emily Coleman - 4 months ago 15
AngularJS Question

Accessing components from within a different component

Using Angularjs 1.5, I have been having trouble making a D3.js graph that's defined in one component display on a page that relies on a different one. I'm new to Angular, and while I think the answer is buried somewhere in the official documentation's example of a component tree, I wasn't able to completely follow the logic.

My goal is to make the graph defined in graphController, and make it appear as accessed by requests.template.html.

Trying to inject it into requests.component like I would a directive gave me an unknown provider error

I inherited the setup from someone else (and would prefer to leave the protect structure the way it is), and it more or less looks like this:

requests.module.js
angular.module("requests", []);

requests.component.js
angular.module('requests').component('requests', {
templateURL: 'Bindings/Templates/requests.html',
controller: function requestsController($scope) {
[code]
}
}

requests.template.html
//where I'd like to be able to access the controller from the graphs component

graphs.module.js
angular.module('graphs', []);

graphs.component.js
angular.module('graphs').component('graphs', {
templateURL: '/Bindings/Templates/graphs.template.html',
controller: function graph() {(code for d3 graph)};
}

graphs.template.js
{{$ctrl.graph()}}
//this page is just a placeholder to see the graph until I can view it on requests' page


Any help you can give or ways to think about how I should thread this controller call through would be great. Thanks!

Answer

If you are wanting the graph to display in the requests component then you can just insert the component element tag within the requests template. For example, in the Bindings/Templates/requests.html insert:

<div class="stuff-to-wrap-graph">
    <graphs></graphs>
</div>

Once you have created a component, think of it like a unique html element that you can insert anywhere, including within other components. You would normally only want direct access to the controller of another component if it was a tightly coupled child of a parent, eg. an individual tab within a tabs component that needs to talk to the parent tab container.

Comments