Reputation: 1910

How to bind to a directive attribute?

I want the title for the highchart to be $scope.data.title but currently the attribute title interpret data.title as a string and a bind to the scope. I've tried putting "", {{}} around data.title the .html but it doesn't work. I think im missing something else.

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'
    };

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

This not works as intended, but is it possible to do it without the watch?

Upvotes: 2

Answers (4)

President Camacho

Reputation: 1910

Solved it by adding a watch on the object.

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

Upvotes: 0

Gaurav Srivastava

Reputation: 3232

you won't have to put s.title inside ng-repeat. it should be outside. Here is a working snippet.:-

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>

Upvotes: 4

Jins Peter

Reputation: 2469

Apparently this is how you must do it. Highchart docs for title

working plunker

Now my-tabs.html

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

and 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);

Upvotes: 2

Mohamed dev

Reputation: 172

i can't see why you need data binding if the title is a scope variable of the chartCtrl.

this will simply do the trick:

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

Plunker

Upvotes: 1

How to bind to a directive attribute?

Answers (4)

Related Questions