angularJS依赖注入时候的顺序问题
angularJS依赖注入时候的顺序问题
MingjunYang 发表于3年前
angularJS依赖注入时候的顺序问题
  • 发表于 3年前
  • 阅读 3970
  • 收藏 10
  • 点赞 0
  • 评论 3

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: angularJS引入的module总是null,,跟官方demo差不多的代码还是会出现null

遇到问题

刚开始接触angularJS也就三个月,这期间大量的工作都是频繁的编码、调试和继续编码。这期间也没有遇到过什么大问题,angularJS这货也是学的稀里糊涂的。
这两天倒是发现一个问题,我需要一个上传文件功能,使用了 angular-file-upload 这个module。按照文档里的例子写入依赖注入

angular.module('myapp', ['mapDir', 'mapsrv', 'angularFileUpload'])
    .controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, $location, lmapsrv,$upload) {
          …………………………
        })
])

那两个map有关的是我自己的module,其中一个是directive,$upload是上传文件有关的。我遇到的问题是在调试代码的时候总是$upload为null,用到这的时候总是报错。检查依赖和文件都没用错,引用也没发现有什么特别的问题。昨天发现这个问题之后因为忙着其他事情,暂时搁置上传文件这个功能。当时觉得这真奇怪。

解决问题

今天终于腾出手了想这个事情了,先考虑的是不是angularJS版本不一样了(可笑),以前用的1.2.6,现在用的1.2.18。但是换过版本还是问题依旧,最后只有一招了,打断点看堆栈和变量。不打不要紧,一打还真看出问题了。发现一个奇怪的现象,明明已经执行过了'angularFileUpload'相关的代码,但是$upload变量雷打不动的还是null。真是百思不得其解。在测试寻找问题根源的过程中,无意间将 "$http", "$rootScope"两个依赖的位置调换了,突然发现我的$http.get()开始报错了,这时候断点看见的变量更是奇怪$http在firebug里出现的居然是$$ 的结构。突然才明白过来

.controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, $location, lmapsrv,$upload) {}])

上面中括号里面的依赖和function的参数列表是顺序对应的关系
正确的顺序是如下的:

.controller("MapsCtrl", ["$scope", "$http", "$rootScope", '$upload', "lmapsrv",
        function($scope, $http, $rootScope, lmapsrv,$upload, **$location**) {}])

问题出现的原因

问题出现的原因还是对angularJS不了解,不知道注入依赖还有顺序的问题。之前没有暴露这个问题应该是我每次添加新的module的时候都是在尾部添加,而这次自己写的module,而且随意放置位置了,才导致这个我问题的出现。不过有了这次问题,倒是长进了不少!我这里还潜藏了一个问题,function的最后一个参数也会是空值,原则上应该是我不用就不要写进来。这时候,感觉angularJS真的是很有意思的东西,我这个写python后台应用的,用bootstrap看看参考就能搞一对对漂亮的界面出来,伪前端装逼也没人发现。


标签: angularJS
共有 人打赏支持
MingjunYang
粉丝 35
博文 18
码字总数 10236
评论 (3)
逆尘
angular 使用这种注入方式,并不要求方法变量与注入名称完全相同,调用的时候会按顺序赋值然后调用就行
MingjunYang

引用来自“逆尘”的评论

angular 使用这种注入方式,并不要求方法变量与注入名称完全相同,调用的时候会按顺序赋值然后调用就行
还是写的可读一点的好。
cnlinjie
这种写法在代码混淆的情况下依赖可以运行。
×
MingjunYang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: