javascript - 如何使用 ionic 在 Angular JS 中制作自定义指令？

Question

我正在尝试在 ionic 中制作自定义指令。但是我无法像在 jQuery 中那样显示相同的内容。实际上，我在应用程序中使用高度图表。我在 jQuery 中得到了解决方案。但我想做出相同的结果所以我为此做了一个自定义指令，但我无法显示与 fiddle 中相同的输出

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

我想以我的 Angular 显示它，如 fiddle 所示

我做了一个 Angular Directive(指令)，但它没有显示图表，你能告诉我哪里做错了吗

这是我的代码 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>

在指令代码中，您需要使用编译和链接函数来调用现有的 jQuery 插件并对其进行初始化。这是 link这可能会帮助您将现有的 jQuery 插件组合到指令中。

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

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