javascript - Angularjs and Highcharts directive in Nested object -
in application create directive draw highcharts chart .
app.directive('chart', [function () { return { restrict: 'e', scope:{ config :"=", chartobj: "=?" }, link: function (scope, ielement, iattrs) { scope.chartconfiguration = {}; /*scope.$parent.$watch('conf',function(value){ console.log("aaa"); });*/ scope.$watch('config',function(value){ console.log("1111111111111"); console.log(scope.config); if(value==null) return; var b = angular.tojson(scope.config); /*if(($('.main-div').find('pre').html())!=null) $('.main-div pre').remove();*/ $('.main-div pre').html("<pre class='.configuration'>"+angular.tojson(scope.config)+"</pre>"); scope.chartconfiguration.chart = scope.config.options.chart; scope.chartconfiguration.series = scope.config.series; scope.chartconfiguration.chart.renderto = ielement[0]; scope.chartobj = new highcharts.chart(scope.chartconfiguration); }); } }; }])
in directive use $watch
watch properties of object. it's watch on property not nested. forexample if want change $scope.conf.options.chart.type
watch doesn't understand . problem create plunker
you use $watch
third argument, objectequality
flag, set true this:
scope.$watch('config',function(value){ // code }, true); // set objectequality flag true here
also see: $scope documentation
Comments
Post a Comment