2016-07-24 28 views
0

Mit Angularjs 1.5 hatte ich Probleme, ein D3.js-Diagramm zu erstellen, das in einer Komponente auf einer Seite definiert ist, die auf einer anderen Komponente basiert. Ich bin neu bei Angular, und während ich denke, dass die Antwort irgendwo in the official documentation's example of a component tree begraben ist, war ich nicht in der Lage, der Logik vollständig zu folgen.Zugreifen auf Komponenten aus einer anderen Komponente

Mein Ziel ist es, das in graphController definierte Diagramm so zu erstellen, dass es von requests.template.html aufgerufen wird.

Der Versuch, es in requests.component zu injizieren, wie würde ich eine Richtlinie gab mir einen unbekannten Anbieter Fehler

ich das Setup von jemand anderem vererbt (und würde es vorziehen, die Schutzstruktur, die die Art und Weise ist es zu verlassen), und es mehr oder weniger wie folgt aussieht:

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 

Jede Hilfe können Sie Möglichkeiten geben oder darüber nachzudenken, wie ich diesen Controller Aufruf Thread sollte groß wäre durch. Vielen Dank!

+0

Zunächst einmal gibt es keinen Zugriff auf $ scope in Komponenten, das ist ein Richtlinienkonzept, da der Umfang einer Komponente immer isoliert ist. Wenn Sie Komponenten benötigen, um miteinander zu kommunizieren, müssen Sie in erfordern. –

Antwort

1

Wenn Sie möchten, dass das Diagramm in der Requests-Komponente angezeigt wird, können Sie einfach das Komponentenelement-Tag in die Anforderungsschablone einfügen. Zum Beispiel in den Bindungen/Templates/requests.html einfügen:

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

Sobald Sie eine Komponente erstellt haben, denken Sie daran, wie ein einzigartiges HTML-Element, das Sie überall einsetzen können, auch in anderen Komponenten. Sie würden normalerweise nur direkten Zugriff auf den Controller einer anderen Komponente wünschen, wenn es sich um ein eng gekoppeltes Kind eines Elternteils handelt, z. Eine einzelne Registerkarte innerhalb einer Tab-Komponente, die mit dem übergeordneten Tab-Container kommunizieren muss.

Verwandte Themen