Question

我希望高图的标题为$scope.data.title，但目前属性标题将data.title解释为字符串并绑定到范围。我已经尝试将"", {{}}放在data.title .html附近，但它不起作用。我想我错过了别的东西。

的index.html

  <test-chart title="{{data.title}}">
    <chart-series title="Series 1" type="line">
    </chart-series>
    <chart-series title="Series 3" type="column">
    </chart-series>
  </test-chart>

的script.js

  .directive('testChart', function() {
    return {
      restrict: 'E',
      transclude: true,
      controllerAs:'chartCtrl',
      scope: {
      },
      controller: ['$scope', '$element', '$attrs', function ChartController($scope, $element, $attrs) {

        $scope.data = {
            title: 'HIGHGRAPH',
            series: [{
                title: 'series1', 
                type: 'line', 
                data: [1,2]
            }, {
                title: 'series2', 
                type: 'area', 
                data: [3,5]
            }]
        }        

    var hc = Highcharts.chart('highchart_container', {}); 

    $scope.$watch("data",function(newValue,oldValue) {

      hc.update({
         title: {
              text: newValue.title
            }
      })
    })

        this.addSeries = function(a) {

          hc.addSeries({
            name: a.title,
            type: a.type,
            data: [1,2,3,4,5,6]
          })
        };
      }],
      templateUrl: 'my-tabs.html'
    };

编辑：https://plnkr.co/edit/spUAkCjK61HgUGu40pZl?p=preview

这不符合预期，但可以在没有watch的情况下执行此操作吗？

Answer 1

你不必将s.title放在ng-repeat中。它应该在外面。这是一个工作片段。： -

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});

app.directive('testChart', function() {
    return {
      restrict: 'E',
      transclude: true,
      controllerAs:'chartCtrl',
      scope: {
      },    
      controller: ['$scope', '$element', '$attrs', function ChartController($scope, $element, $attrs) {
        
    	$scope.data = {
        	title: 'HIGHGRAPH',
            series: [{
            	title: 'series1', 
                type: 'line', 
                data: [1,2]
            }, {
            	title: 'series2', 
            	type: 'area', 
            	data: [3,5]
            }]
        }        

        var hc = Highcharts.chart('highchart_container', {
          title: {
            text: $scope.data.title
          }
        });

        this.addSeries = function(a) {
          
          hc.addSeries({
            name: a.title,
            type: a.type,
            data: [1,2,3,4,5,6]
          })
        };
      }],
      template: '<div> <p>This is a chart</p><ul> <li ng-repeat="s in series">  </li> </ul> <div id=\'highchart_container\'></div> <ng-transclude></ng-transclude> </div>'
    };
  })
  .directive('chartSeries', function() {
    return {
      require: '^test-chart',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, chartCtrl) {
        chartCtrl.addSeries(attrs);
      },
    };
  });

#highchart_container{
height:250px!important;
}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <test-chart title="Custom title">
    <chart-series title="Series 1" type="line">
    </chart-series>
    <chart-series title="Series 3" type="column">
    </chart-series>
  </test-chart>

</div>

Answer 2

显然这就是你必须这样做的方式。 title

的Highchart文档

工作plunker

现在 my-tabs.html

<div>
  <div id='highchart_container'></div>
  <ng-transclude></ng-transclude>
</div>

和 index.html

<body ng-app="docsTabsExample">
  <test-chart>

    <chart-series title="Series 1" type="line">
    </chart-series>
    <chart-series title="Series 3" type="column">
    </chart-series>
  </test-chart>
</body>
</html>

<强>的script.js

(function(angular) {
  'use strict';
angular.module('docsTabsExample', [])
  .directive('testChart', function() {
    return {
      restrict: 'E',
      transclude: true,
      controllerAs:'chartCtrl',
      controller: ['$scope', '$element', '$attrs', function ChartController($scope, $element, $attrs) {

        $scope.data = {
            title: 'HIGHGRAPH',
              series: [{
                title: 'series1', 
                  type: 'line', 
                  data: [1,2]
              }, {
                title: 'series2', 
                type: 'area', 
                data: [3,5]
              }]
          }  

        var hc = Highcharts.chart('highchart_container', {
          title: {
            align:"center",
            text:$scope.data.title
          }
        }); 


        this.addSeries = function(a) {

          hc.addSeries({
            name: a.title,
            type: a.type,
            data: [1,2,3,4,5,6]
          })
        };
      }],
      templateUrl: 'my-tabs.html'
    };
  })
  .directive('chartSeries', function() {
    return {
      require: '^test-chart',
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, chartCtrl) {
        chartCtrl.addSeries(attrs);
      },
    };
  });
})(window.angular);

Answer 3

如果标题是chartCtrl的范围变量，我无法理解为什么需要数据绑定。

这只是诀窍：

<div>
    {{data.title}}
   <div id='highchart_container'></div>
   <ng-transclude></ng-transclude>
</div>

Plunker

Answer 4

通过在对象上添加watch来解决它。

https://plnkr.co/edit/spUAkCjK61HgUGu40pZl?p=preview

如何绑定到指令属性？

4 个答案: