Javascript 单个控制器中的多个相同指令

我正在建立一个网页，使用Highcharts来可视化一些数据。 为了使其可重用，我将所需的图表包装在一个指令中

'use strict';
angular.module('statisticsApp')
  .directive('cleanbarchart', function () {
    scope:{
      localdata:'@'
    }
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, iAttrs) {
          // console.log(iAttrs);
          // console.log(iAttrs);
          // var attrs = JSON.parse(iAttrs.id);
          var attrs = iAttrs;
          element.highcharts({
            chart: {
              type: 'column',
              width:1000,
              zoomType: 'x'
            },
            title: {
              text: scope.localdata[attrs.id].title //title
            },
            xAxis: {
              categories: scope.localdata[attrs.id].categories, crosshair: true

            },
            yAxis: {
              min: 0
            },
            tooltip: {
  //            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  //            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  //            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
  //            footerFormat: '</table>',
  //            shared: true,
  //            useHTML: true
            },
            plotOptions: {
  //            column: {
  //            pointPadding: 0.2,
  //            borderWidth: 0
  //          }
            },

            series: scope.localdata[attrs.id].series
          })
      }
    };
  });

<cleanbarchart id="test2"></cleanbarchart>

使用如下所示的服务：

angular.module('statisticsApp')
  .service('HttpDataService', function($http, $q, baseRestPath) {
    // AngularJS will instantiate a singleton by calling "new" on this function
    return {
      getUniqueUsers: function (callback, periodicity) {
        var url = baseRestPath + '/sessions/uniqueUsers';
        console.log(url);
        var dates = [];
        var values = [];

        $http.get(url).then(
          function successCallback(response){
            var data = response.data;
            data.forEach(function(dataLine) {
              dates.push(dataLine[1]);
              values.push(dataLine[0]);
            })
            console.log(values);
            callback({title: 'Unique Users', categories:dates, 'series': [ {name: 'Alltime', data:values} ]  });
        //    return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ]  }
          },function errorCallBack(response){
            //do nothing
          }
        );


//      return {'title': "Unique Users", 'categories':dates, 'series': [ {name: "Alltime", data:values} ]  }
      }
    }
  });

最后，在我的html中，我使用以下代码调用该指令

'use strict';
angular.module('statisticsApp')
  .directive('cleanbarchart', function () {
    scope:{
      localdata:'@'
    }
    return {
      template: '<div></div>',
      restrict: 'E',
      link: function postLink(scope, element, iAttrs) {
          // console.log(iAttrs);
          // console.log(iAttrs);
          // var attrs = JSON.parse(iAttrs.id);
          var attrs = iAttrs;
          element.highcharts({
            chart: {
              type: 'column',
              width:1000,
              zoomType: 'x'
            },
            title: {
              text: scope.localdata[attrs.id].title //title
            },
            xAxis: {
              categories: scope.localdata[attrs.id].categories, crosshair: true

            },
            yAxis: {
              min: 0
            },
            tooltip: {
  //            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  //            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  //            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
  //            footerFormat: '</table>',
  //            shared: true,
  //            useHTML: true
            },
            plotOptions: {
  //            column: {
  //            pointPadding: 0.2,
  //            borderWidth: 0
  //          }
            },

            series: scope.localdata[attrs.id].series
          })
      }
    };
  });

<cleanbarchart id="test2"></cleanbarchart>

---

感谢所有帮助

首先，您需要更改您的服务以回报承诺，而不是向您的服务传递回调。如果打开

$http

，您将看到

$http.get

返回HttpPromise对象，您可以稍后解析该对象

完成后，您可以将承诺传递给指令而不是数据

因此，不是：

$scope.localdata = {} ;
HttpDataService.getUniqueUsers(done) ;

改为：

$scope.localdataPromise = HttpDataService.getUniqueUsers();

在后面的指令中，我们可以这样解决：

scope.localdataPromise.then(function (data) { /* resolve data and draw chart */ });

---

首先，您需要更改服务以返回承诺，而不是向服务传递回调。如果打开

$http

，您将看到

$http.get

返回HttpPromise对象，您可以稍后解析该对象

完成后，您可以将承诺传递给指令而不是数据

因此，不是：

$scope.localdata = {} ;
HttpDataService.getUniqueUsers(done) ;

改为：

$scope.localdataPromise = HttpDataService.getUniqueUsers();

在后面的指令中，我们可以这样解决：

scope.localdataPromise.then(function (data) { /* resolve data and draw chart */ });

---

非常感谢你。另外一个问题，如果我想重新格式化数据，是否有办法将手表放在控制器中而不是指令中？您可以这样链接承诺解析器：

var promise=$http.get（…）；承诺。然后（…）；承诺。然后（…）

所以如果我想使用一些单选按钮的观察者来更改图表中的te数据，我就无法让它工作。手表可以工作，但数据不会刷新如果仍要使用手表，请尝试将

objectEquality

参数设置为true。你可以在《非常感谢》中读到更多。另外一个问题，如果我想重新格式化数据，是否有办法将手表放在控制器中而不是指令中？您可以这样链接承诺解析器：

var promise=$http.get（…）；承诺。然后（…）；承诺。然后（…）

所以如果我想使用一些单选按钮的观察者来更改图表中的te数据，我就无法让它工作。手表可以工作，但数据不会刷新如果仍要使用手表，请尝试将

objectEquality

参数设置为true。你可以在网上阅读更多