Question

我试图在离子中制作自定义指令。但是我无法像在jQuery中那样显示相同的内容。实际上我在我的应用程序中使用了高度图表。我在jQuery中得到了解决方案。但我想要制作相同的角度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)"

})

任何人都有任何想法？为什么不显示？

Answer 1

在HTML中，您需要修改char标记以显示范围变量：

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

在你的指令代码中，你需要使用compile和link函数来调用现有的jQuery插件并初始化它。这里有一个link可以帮助您将现有的jQuery插件组合成指令。

基本上你需要在指令的链接函数中调用图表插件的初始化函数，如下所示：

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

如何使用离子在角度js中制作自定义指令？

1 个答案: