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

相关问题