watcher in angular directive not triggering

Question

I created my own directive and watching an attribute like this:

angular.module('app', [])
.controller('pieController', ['$scope', function ($scope) {
 function initData() {
 var arr = [];
 for (var i = 0; i < 6; i++) {
 arr.push(parseInt(Math.random() * 100));
 }
 return arr;
 }
 var data = initData();
 $scope.data = data;
 $scope.changData = function () {
 var data = initData();
 $scope.data = data;
 }
}]).directive('eChart', [function () {
 function link($scope, element, attrs) {
 var myChart = echarts.init(element[0]);
 if (attrs.myOptions) {
 $scope.$watch(attrs.myOptions, function () {
 var options = $scope.$eval(attrs.myOptions);
 if (angular.isObject(options)) {
 myChart.setOption(options);
 }
 }, true);
 }
 }
 return {
 restrict: 'A',
 link: link
 };
}]);

and the html is like this:

<div class="col-xs-12" ng-controller="pieController">
 <button ng-click="changData()">click me</button>
 <div e-chart my-options="{tooltip: {show: true},
 legend: {
 data: ['销量']
 },
 xAxis: [
 {
 type: 'category',
 data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
 }
 ],
 yAxis: [
 {
 type: 'value'
 }
 ],
 series: [
 {
 'name': '销量',
 'type': 'bar',
 'data': {{data}}
 }
 ]}" style="height: 400px;width: 100%;"></div>
 </div>
</div>

In my controller,i change the value of the attribute,but the watcher doesn't trigger.

So what i am doing wrong?Thanks.

here is code in fiddle

• keller: Sorry for my english cause i am a chinese and really hope your help
• Sameer K: What data the changeData function in controller trying to change and if you console.log() attrs.myOptions then do you see updated data ??
• keller: The changeData function is trying to change the data in $scope,and this data is also bind to the attribute my-options 。
• keller: I can not console.log attrs.myOptions cause the watcher does't work
• Sameer K: possible to create fiddle or plunker replicating this problem ??

Answer 1

Please use attrs.$observe You directive should be like this

 .directive('eChart', [function () {
 function link($scope, element, attrs) {
 element.text("innerText");
 //监听options变化
 if (attrs.myOptions) {
 attrs.$observe('myOptions', function () {
 console.log("变了")
 var options = $scope.$eval(attrs.myOptions);
 element.text(attrs.myOptions);
 })
 }
 }
 return {
 restrict: 'A',
 link: link
 };
}]);

• Qi Tang: If you think this answer solves your problem plz accept it.

Answer 2

I thought you should bind the data directly.

app.directive('eChart', [function() {
 function link($scope, element, attrs) {
 if (attrs.myOptions) {
 $scope.$watch('data', function(newValue, oldValue) {
 if (angular.isObject(newValue)) {
 console.log('change');
 }
 }, true);
 }
 }
 return {
 restrict: 'A',
 scope: {
 data: '=myData'
 },
 link: link
 };
}]);

<div e-chart my-data="data" my-options="... your options ..."></div>