angularjs - How to bind to a directive attribute? -
i want title highchart $scope.data.title attribute title interpret data.title string , bind scope. i've tried putting "", {{}} around data.title .html doesn't work. think im missing 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 intended, possible without watch?
you won't have put s.title inside ng-repeat. should outside. here 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 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>
Comments
Post a Comment