Google Chart顯示爲NgDirective，但不是NgComponent

我在AngularDart組件中顯示Google Graphs，但在AngularDart指令中沒有顯示Google Graphs問題。對於下面的代碼，該圖很好地顯示爲directive，其中div節點有兩個divs添加爲兒童以包含圖形和SVG。但是對於compoenent，該圖不顯示，但在DOM中，相同的div顯示爲兒童。任何想法如何調試這個或它的解決方案？Google Chart顯示爲NgDirective，但不是NgComponent

運行下面的代碼打印出控制檯Succesfully printed plot for Component graph和Succesfully printed plot for Directive graph。

最簡單的代碼來展示它是：

main.dart：

import 'dart:html' as dom; 

import 'package:js/js.dart' as js; 
import 'package:angular/angular.dart'; 

void printPlot(dom.Element element, String title) { 
    var gviz = js.context.google.visualization; 

    var gTableData = new js.Proxy(gviz.DataTable); 
    gTableData.addColumn('number', 'Size'); 
    gTableData.addColumn('number', 'Counts'); 

    gTableData.addRow(js.array([1, 2])); 
    gTableData.addRow(js.array([3, 4])); 

    var options = js.map({ 
     'title': title 
    }); 

    // Create and draw the visualization. 
    var chart = new js.Proxy(gviz.ScatterChart, element); 
    chart.draw(gTableData, options); 
    print("Succesfully printed plot for $title"); 
} 

@NgComponent(selector: '[my-component]') 
class MyComponent { 
    final dom.Element element; 
    MyComponent(this.element) { 
    js.context.google.load('visualization', '1', js.map({ 
     'packages': ['corechart'], 
     'callback': (() => printPlot(element, 'Component graph')) 
    })); 
    } 
} 

@NgDirective(selector: '[my-directive]') 
class MyDirective { 
    final dom.Element element; 
    MyDirective(this.element) { 
    js.context.google.load('visualization', '1', js.map({ 
     'packages': ['corechart'], 
     'callback': (() => printPlot(element, 'Directive graph')) 
    })); 
    } 
} 

@NgController(selector: '[controller]', 
    publishAs: 'ctrl') 
class Controller { 
    Controller() { 
    } 
} 

class DashboardModule extends Module { 
    DashboardModule() { 
    type(Controller); 
    type(MyComponent); 
    type(MyDirective); 
    } 
} 

void main() { 
    ngBootstrap(module: new DashboardModule()); 
}

index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body controller> 
<div my-component></div> 
<div my-directive></div> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="application/dart" src="main.dart"></script> 
<script type="text/javascript" src="packages/browser/dart.js"></script> 
</body> 
</html>

來源

2014-04-15 jakobht

這是很可能是由於由NgComponent推出的shadowDOM。當JavaScript庫不支持shadowDOM（它可能不會），它只是不會找到你的DOM元素，因此不能對它們採取行動。 AngularDart團隊正在處理類似於NgComponent的人，但沒有shadowDOM（目前不可能）。但是這只是在實驗狀態（據我所知）和沒有發佈日期可用。

來源

2014-04-15 09:36:01

感謝您的解釋。 – jakobht

Google Chart顯示爲NgDirective，但不是NgComponent

回答

相關問題