如何在angular js中使用ionic创建自定义指令

how to make custom directive in angular js using ionic?

本文关键字：ionic 创建 自定义 指令 angular js      更新时间：2023-09-26

我正在尝试在ionic中制作自定义指令，但我无法像在jQuery中那样显示。实际上，我在应用中使用了高度图，我在jQuery中找到了解决方案，但我想在angular js中实现同样的效果，所以我为它做了一个自定义指令但我无法显示与fiddle

相同的输出http://jsfiddle.net/gh/get/jquery/1.9.1/hililide-software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/

我想在我的角中显示它如fiddle

所示

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

是我的代码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)"
})

有人知道吗?为什么不显示?

在您的HTML中，您需要修改char标记以显示作用域变量:

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

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

基本上你需要在指令的link函数中调用图表插件的initialize函数，像这样:

link: function(scope, element, attrs) {
        $(element).highcharts(....);
}
相关文章：