Angularjs 如何在angular js中创建自定义指令或在指令中传递变量

我正在尝试用angular制作条形图。我可以在jquery中制作（使用highchart.js文件）。这是我可以在jquery代码中制作的链接 。我得到了正确的输出。但我需要展示的是使用指令使用angularjs。所以我尝试生成指令。我的问题是如何在指令中传递参数

这是我的角度代码。

---

我希望它看起来和jquery中的一样？我们可以使用作用域在指令中传递变量吗？

您需要从指令的隔离作用域传递参数，然后在指令内部，您需要在指令元素上使用

$

，以使

highcharts

方法可用

标记

<chart-test chart-title="chartTitle" x-axisarry="xAxisarry" 
y-axis="yAxis" json-data="janeData" names="names"></chart-test>

指令

.directive('chartTest', function() {
    return {
      restrict: 'E',
      scope: {
        chartTitle: '=',
        xAxisarry: '=',
        yAxis: '=',
        jsonData: '=',
        names: '='
      },
      link: function(scope, element, attrs) {
        $(element).highcharts({
          chart: {
            type: 'bar'
          },
          title: {
            text: scope.chartTitle
          },
          xAxis: {
            categories: scope.xAxisarry
          },
          yAxis: {
            title: {text: 'Fruit eaten'}
          },
          series: [{
            name: scope.names[0],
            data: scope.jsonData['jane']
          }, {
            name: scope.names[1],
            data: scope.jsonData['jone']
          }]
        });
      }
    }
});

---

你能派plunker来吗？@user944513给我一些吗minutes@user944513在创作的路上，哥们给我2分钟

.controller('MainCtrl', function($scope) {
    $scope.chartTitle = "";
    $scope.xAxisarry = ['Apples', 'Bananas', 'Oranges'];
    $scope.yAxis = 'Fruit eaten';
    $scope.data = {
      jane: [1, 0, 4],
      jone: [5, 7, 3]
    };
    $scope.names = ["jane", "jone"];

})

.directive('chartTest', function() {
    return {
      restrict: 'E',
      scope: {
        chartTitle: '=',
        xAxisarry: '=',
        yAxis: '=',
        jsonData: '=',
        names: '='
      },
      link: function(scope, element, attrs) {
        $(element).highcharts({
          chart: {
            type: 'bar'
          },
          title: {
            text: scope.chartTitle
          },
          xAxis: {
            categories: scope.xAxisarry
          },
          yAxis: {
            title: {text: 'Fruit eaten'}
          },
          series: [{
            name: scope.names[0],
            data: scope.jsonData['jane']
          }, {
            name: scope.names[1],
            data: scope.jsonData['jone']
          }]
        });
      }
    }
});