angular1.x directive通信问题

Question

在angular 1.x版本中使用directive，代码如下
// directive

module.directive('rankChart', function() {
    return {
        scope: {
            id: "@",
            rankItem: "=",
            rankData: "=",
            reloadChartData: "=rankreload"
        },
        restrict: 'E',
        template: '<div>{{rankData[0].showHand}}</div>',
        replace: true,
        controller: function($scope) {
            var loadRankChartData = function() {
            var option = {
                    grid: {
                        x: 50,
                        x2: 50,
                        y: 0,
                        y2: 0,
                        height: $scope.rankItem.length * 40
                    },
                    xAxis: {
                        type : 'value',
                        axisLine: {show: false},
                        axisLabel: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    },
                    yAxis: {
                        type : 'category',
                        axisTick: {show: false},
                        data : $scope.rankItem
                    },
                    series : [
                        {
                            name:'贡献值',
                            type:'bar',
                            stack: '排名',
                            barWidth: 16,
                            itemStyle: {
                                normal: {
                                    color: '#3F9AE9'
                                }
                            },
                            label: {
                                normal: {
                                    color:'#333333',
                                    show: true,
                                    position: 'right'
                                }
                            },
                            data:$scope.rankData
                        }
                    ]
                };


                var myChart = echarts.init(document.getElementById($scope.id));
                myChart.clear();
                myChart.setOption(option);
                myChart.on('click',function (param) {
                    console.log(param)
                    dataIndex = param.dataIndex
                    angular.forEach($scope.rankData,function (item) {
                        item.showHand = false
                    });
                    $scope.rankData[dataIndex].showHand = true

                    console.log($scope.rankData)
                })

            }

            // 对外接口
            $scope.reloadChartData = function() {
                loadRankChartData();
            }


        }

    };
});

html

 <rank-chart id="rankChart" rank-data="rankData" rank-item="rankItem"
                                                    style="width:400px;"  ng-style="{'height': !rankData.length?'80px' : rankData.length * 40 + 'px'}"   rankreload="rankreload"></rank-chart>
                                                    

controller

$scope.rankData = []
$scope.rankItem = []

请求后--
$scope.rankData = [{value: 22,sid:22, rank: 1,showHand:false}]
$scope.rankItem = ['name']
$scope.rankreload($scope.rankItem, $scope.rankdata);

这里使用的echart，想在点击之后改变它的属性，改了之后在directive里能打印出来，showHand为ture，但是controller里或者说页面的值并没有发生变化，看过文档 说 '=' 是双向绑定，不知道为什么controller的值没有改变呢？

Answer 1

因为你用了echart中的click事件，而不是ng1自带的ng-click事件，没有办法触发ng1本身的脏检查，而ng1本身的双向数据绑定依赖的就是脏检查机制，因此视图上没有得到更新。
解决办法就是手动触发数据模型的检查，也就是$scope.$apply()。

Answer 2

调用下$scope.$apply()