热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

想实现的方式如下html

想实现的方式如下
html

1

controller.js

1
2
3
4
5
6
7
8
9
10
11
$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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
app.directive('pieCharts', function($http) {

    return {

        scope: {  

            id: "@",  

            legend: "=",  

            arr: "="

        },  

        restrict: 'E',  

        template: '
',  

        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}
{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,是否是执行顺序的原因,还是?


推荐阅读
  • vue引入echarts地图的四种方式
    一、vue中引入echart1、安装echarts:npminstallecharts--save2、在main.js文件中引入echarts实例:  Vue.prototype.$echartsecharts3、在需要用到echart图形的vue文件中引入:   importechartsfrom&amp;quot;echarts&amp;quot;;4、如果用到map(地图),还 ... [详细]
  • 普通树(每个节点可以有任意数量的子节点)级序遍历 ... [详细]
  • 本文探讨了 TypeScript 中泛型的重要性和应用场景,通过多个实例详细解析了泛型如何提升代码的复用性和类型安全性。 ... [详细]
  • 事件是程序各部分之间的一种通信方式,也是异步编程的一种实现形式。本文将详细介绍EventTarget接口及其相关方法,以及如何使用监听函数处理事件。 ... [详细]
  • 本文节选自《NLTK基础教程——用NLTK和Python库构建机器学习应用》一书的第1章第1.2节,作者Nitin Hardeniya。本文将带领读者快速了解Python的基础知识,为后续的机器学习应用打下坚实的基础。 ... [详细]
  • 本文详细介绍了在 CentOS 7 系统中配置 fstab 文件以实现开机自动挂载 NFS 共享目录的方法,并解决了常见的配置失败问题。 ... [详细]
  • 重要知识点有:函数参数默许值、盈余参数、扩大运算符、new.target属性、块级函数、箭头函数以及尾挪用优化《深切明白ES6》笔记目次函数的默许参数在ES5中,我们给函数传参数, ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • 检查在所有可能的“?”替换中,给定的二进制字符串中是否出现子字符串“10”带 1 或 0 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 在React中使用setState时遇到错误,本文将详细分析错误原因并提供解决方案。 ... [详细]
  • 使用HTML和JavaScript实现视频截图功能
    本文介绍了如何利用HTML和JavaScript实现从远程MP4、本地摄像头及本地上传的MP4文件中截取视频帧,并展示了具体的实现步骤和示例代码。 ... [详细]
  • Spring Boot 中配置全局文件上传路径并实现文件上传功能
    本文介绍如何在 Spring Boot 项目中配置全局文件上传路径,并通过读取配置项实现文件上传功能。通过这种方式,可以更好地管理和维护文件路径。 ... [详细]
  • 在软件开发过程中,经常需要将多个项目或模块进行集成和调试,尤其是当项目依赖于第三方开源库(如Cordova、CocoaPods)时。本文介绍了如何在Xcode中高效地进行多项目联合调试,分享了一些实用的技巧和最佳实践,帮助开发者解决常见的调试难题,提高开发效率。 ... [详细]
author-avatar
mobiledu2502884213
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有