Gaussian in angularJS指令

我在一個angularJS指令中包裝了一個highchart，並且我試圖添加一個應該顯示在圖表下方的按鈕。問題是按鈕不存在。Gaussian in angularJS指令

HTML：

<div id="container" my-chart style="height: 400px; margin-top: 1em"></div>

JS：

var app = angular.module('app', []); 
app.directive('myChart', function() { 
    return { 
     restrict: 'A', 
     replace: true, 

     template: '<div><div id="chart"></div><div><button id="btn">Click</button></div><div>', 
     link: function (scope, elem, attrs) { 
      elem.highcharts({ 
       xAxis: { 
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
       }, 

       series: [{ 
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
       }] 

      }); 
     } 
    } 
});

請參閱本JsFiddle例如。

更新：這是固定的JsFiddle執行答案後。

來源

2014-11-06 ronen

這是因爲您在元素上調用.highcharts（），因此它會刪除裏面的所有內容並呈現圖表。嘗試使用模板是這樣的：

<div> 
    <div id="chart"></div> 
    <div><button id="btn">Click</button></div> 
</div>

，然後在向鏈路的函數調用：

$("#chart").highcharts({})

這個ID選擇相反的你可以用一種永遠選擇你想要什麼。你可以把類，然後用類圖一樣調用它元素孩子：如果你想在highcharts方式添加一個按鈕

$(elem).children(".chart").highcharts({...

來源

2014-11-06 07:51:38 chriss

我想，也許這撥弄可以幫助你：

fiddle

exporting: { 
     buttons: { 
      customButton: { 
       x: -62, 
       onclick: function() { 
        alert('Clicked'); 
       }, 
       symbol: 'circle' 
      } 
     } 
    }

來源

2014-11-06 08:15:41

Gaussian in angularJS指令

回答

相關問題