angularjs - 如何在 Angular js中制作自定义指令或在指令中传递变量

Question

我正在尝试以 Angular 制作条形图。我可以在jquery中制作(使用highchart.js文件)。这是我可以在jquery代码中制作的链接 http://plnkr.co/edit/SD1iSTBk8o1xi3unxKeE?p=preview 。我得到了正确的输出。但是我需要使用 angularjs using 指令来显示同样的事情。所以我尝试制作指令。我的问题是如何在指令中传递我的参数

这是我的 Angular 代码。 http://plnkr.co/edit/LwonlkbCy3asHXyToVMz?p=catalogue

// Code goes here

angular.module('contactsApp', ['ionic'])
.controller('MainCtrl', function($scope) {

}).directive('chartTest',function(){
  return {
    restrict: 'E',
    scope:{

    },
    link :function(scope, element, attrs){
      element.highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: chart_title
        },
        xAxis: {
            categories: xAxisarry
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: names[0],
            data: janeData
        }, {
            name: names[1],
            data: joneData
        }]
    });
    }


  }

});

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

Answer 1

您需要从指令的隔离范围传递参数，然后在指令内您需要在指令元素上使用 $ 以使 highcharts 方法可用。

标记

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

Controller

.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']
          }]
        });
      }
    }
});

Working Plunkr