如何将Google图表集成为AngularJs指令？ [英] How to integrate Google charts as an AngularJs directive?

问题描述

有一些将Google图表整合为AngularJs指令的例子。

像这样： http://plnkr.co/edit/YzwjuU?p=preview

更新：我想在引导整个应用程序之前避免等待google图表准备就绪（如上例所示）：

  google.setOnLoadCallback（function（）{
 angular.bootstrap（document.body，['myApp']）; 
}）; 
  

有没有办法在单个模块中执行此操作，而不是在整个应用程序中执行此操作？

更新2：我创建了我的plunker，它的工作原理没有等待回调，但我不确定它是否可以在所有情况下都能正常工作。 / p>

http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni 正如你已经知道的那样，你可以在HTML或body标签中初始化角度，而不必等待google图表。

为了确保您在Google图表JavaScript代码准备就绪之前不尝试渲染图表，
我将拥有指令$ watch一个新的控制器$ scope属性/标志，您在google.setOnLoadCallback的回调函数中设置。在$ watch回调中，检查以确保标志已设置，然后进行初始化。

There are some examples of integrating Google charts as an AngularJs directive.

Like this one: http://plnkr.co/edit/YzwjuU?p=preview

Update: I want to avoid waiting on google charts to be ready before bootstrapping the whole application (as shown in the example above):

 google.setOnLoadCallback(function() {
        angular.bootstrap(document.body, ['myApp']);
    });

Is there a way to do this in a single module and not on the whole app?

Update 2: I have created my plunker and it works without waiting for the callback but I'm not sure if it will work in all cases.

http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni

解决方案

As you already figured out, you can initialize angular in the html or body tag, without waiting for google charts.

To ensure you don't try to render a chart before the google chart JavaScript code is ready, I would have the directive $watch a new controller $scope property/flag that you set inside the callback function for google.setOnLoadCallback. Inside the $watch callback, check to ensure the flag is set, then do your initialization.

这篇关于如何将Google图表集成为AngularJs指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！