Question

使用Angularjs 1.5，我一直无法制作在一个组件中定义的D3.js图形，该图形依赖于不同的页面。我是Angular的新手，虽然我认为答案隐藏在the official documentation's example of a component tree的某个地方，但我无法完全遵循逻辑。

我的目标是在graphController中定义图表，并使其显示为requests.template.html访问。

尝试将其注入requests.component，就像我指令给了我一个未知的提供程序错误

我从其他人那里继承了设置（并希望保留结构的方式），它或多或少看起来像这样：

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

你可以给予任何帮助或者如何思考如何通过这个控制器调用来解决这个问题。谢谢！

Answer 1

如果您希望图形显示在请求组件中，那么您只需在请求模板中插入组件元素标记即可。例如，在Bindings / Templates / requests.html中插入：

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

创建组件后，可以将其视为可以在任何位置插入的唯一html元素，包括在其他组件中。如果它是父母的紧密耦合的孩子，通常只需要直接访问另一个组件的控制器，例如。标签组件中的单个选项卡，需要与父标签容器对话。

从不同组件中访问组件

1 个答案: