怎么把push到空数组里面的数据转成全局变量，在函数外直接获取

Question

想实现的方式如下
html

<pie-charts id="physicalPieChart" legend="legend" arr="arr"></pie-charts>

controller.js

$scope.arr = [];
$scope.test = function() {
    .....
    promise.then(function(data) {
        for(var item in items) {
            $scope.arr.push(item)
        }
    });
};
$scope.test();
console.log($scope.arr)

实现$scope.arr为全局变量，方便在diretive.js里面直接拿取。
directive.js

app.directive('pieCharts', function($http) {
    return {
        scope: {  
            id: "@",  
            legend: "=",  
            arr: "="
        },  
        restrict: 'E',  
        template: '<div class="m-b-lg box-charts"></div>',  
        replace: true,  
        link: function($scope, element, attrs, controller) { 
            console.log($scope);
            console.log('arr',$scope.arr);  //undefined 
            $scope.arr = [...];
            var option = {
                title : {
                    text: '某站点用户访问来源',
                    left:'40%',
                    top:'5%',
                    textStyle:{
                        fontSize:'10',
                        fontWeight:'normal'
                    }
                },  
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:['#BEF1BE','#3CCFCF','#FBD5FB'],
                legend: {
                    orient: 'vertical',
                    right: '5%',
                    top:'30%',
                    itemWidth:10, 
                    itemHeight:10,  
                    data: $scope.legend
                }, 
                // 数据内容数组  
                series: function(){  
                    var serie = [];
                    var datas = [];
                    for(var i=0;i<$scope.legend.length;i++){
                        var items = {value:$scope.arr[i], name:$scope.legend[i]};
                        datas.push(items);
                    }
                    var item = {  
                        name: '访问来源',  
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'], 
                        data: datas,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }  
                    };  
                    serie.push(item); 
                    return serie; 
                }()  
            }; 
            var pieChart = echarts.init(document.getElementById($scope.id),'macarons');  
            pieChart.setOption(option);  
            window.onresize = pieChart.resize;
        }  
    }
});

在指令里面打印的结果却是

不明白其实把数据push到arr里面其实在指令里面打印$scope是有arr数据的，但是专门打印$scope.arr却报undefind，是否是执行顺序的原因，还是？

Answer 1

Promise then中的代码是异步执行的，你无法保证then确定的执行时间，应该把依赖于then中数据的逻辑也放到then里面去写，不要写到全局空间

Answer 2

function test() {
    let arr=[]
    .....
    promise.then(function(data) {
        for(var item in items) {
            arr.push(item)
        }
    })
    return arr
}

Answer 3

试试在arr的同级声明var that = this;然后在promise里面执行that.arr.push()

Answer 4

window.arr.push(item)

Answer 5

楼上朋友说的是对的，在 .then 里面处理后续逻辑是最好的办法。

既然你的问题与自定义指令相关，请把你的自定义指令代码也放上来。

或者 jsfiddle/codepen/plunkr 给个链接。不用把所有代码都放上去，放能重现你问题的部分就够了。

---

https://jsfiddle.net/S1ngS1ng...

你看下吧。简化版本是这样的，外面获取数据，directive 里面同样会实时更新。

Answer 6

使用$rootscope就是全局的变量了

Answer 7

如果怕取不到arr的值，可以通过在指令里面监听arr的值变化

$scope.$watch('arr',function (newV,oldV) {
    if(!!newV&&newV!==oldV){
        $scope.arr = newV;
    }
});

Answer 8

问题原因：

directive 使用了隔离作用域生成了不依赖父级作用域的子 $scope ，无法访问 physicalPieChart $scope 的属性和方法。

解决思路：

1）将 arr 封装成 service，在 directive 中通过依赖注入获取；
2） 也可使用 @ 或者 = 将 arr 传递至 directive 内部，不过你的数据会暴露在 dom 中。

Answer 9

把数组在全局里声明,然后在函数里赋值就可以啊