0

我想在離子。但我不能顯示相同的自定義指令。事實上,我在我的應用程序中使用hight圖表。我在jQuery中獲得解決方案。但我想做出同樣的事情在角JS。所以我做了一個自定義的指令,但我不能顯示我相同的輸出,如小提琴如何在使用離子的角度js中自定義指令?

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/

我想如圖撥弄我的角度,以顯示該

我做了一個角度指令,但它沒有顯示圖表,你可以告訴我我在哪裏做錯了

這裏是我的代碼 http://play.ionic.io/app/e953fb83592c

var app = angular.module('app', ['ionic']); 
app.directive('chart', function() { 

    return { 
     restrict: 'E', 
     replace: 'true', 
     scope: { 
     dataArray:"=", 
     xAxis_categories:"=", 
     title:"=", 
     subtitle:"=", 
     line:"=", 
     yAxisTitle:"=" 
     }, 
     template: '<h3>Hello World!!</h3>', 
     link: function(s, e, a) { 


     } 
    }; 



}) 

app.controller('cntrl', function($scope) { 

    $scope.dataArray = [{ 
     name: 'Tokyo', 
     data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }, { 
     name: 'London', 
     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
    }] 

    $scope.xAxis_categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

    $scope.title = "Title"; 
    $scope.subtitle = "subtitle"; 
    $scope.chartType="line"; 
    $scope.yAxisTitle="Temperature (°C)" 

}) 

任何身體有什麼想法?爲什麼它不顯示?

回答

1

在你的HTML,你需要修改字符標記來顯示範圍瓦爾:

<chart dataArray="{{dataArray}}" xAxis_categories="{{xAxis_categories}}" title="{{title}}" subtitle="{{subtitle}}" chartType="{{chartType}}" yAxisTitle="{{yAxisTitle}}"></chart> 

在你的指令代碼,你需要使用呼叫現有的jQuery插件編譯和鏈接功能,並對其進行初始化。這裏有一個link,可以幫助您將現有的jQuery插件組合成指令。

基本上你需要調用圖表插件初始化函數的指令,這樣的鏈接功能:

link: function(scope, element, attrs) { 
     $(element).highcharts(....); 
} 
+0

感謝提供答案的代碼請您在撥弄或playionic鏈接 – user944513

+0

提供答案,請檢查是不工作http://play.ionic.io/app/6424a95f90b1 – user944513

+0

你有什麼想法嗎?> – user944513

相關問題