通过将module中不同的部件拆分到不同的js文件中,在组装的时候发现module存在一个奇怪的问题,不知道是不是AngularJS的bug。至今没有找到解释。
问题是这样的,按照理解,angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象。那么,不论在任何js文件中,我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存,而这个内存中存储的就是这个app对象。这种操作在module的js文件,和controller的js文件,service的js文件中确实是没有问题的,是同一个对象。但是再加入directive的时候,这个app对象居然没有被module注册。为什么没有被注册,结论自然是返回的这个app变量所指向的对象不再是我们注册的那个。
也就是如果像下面这样写就会有问题:
app.js
(function(angular){ angular.module('app.main', ['app.login'] ); })(window.angular);
menuController.js
(function(angular){ angular.module('app.main', []); .controller('MenuController',function($scope,menuService,userService){ var loginname=Cookies.getCookieValue("loginname"); var token=Cookies.getCookieValue("token"); Cookies.delCookieValue("token"); Cookies.delCookieValue("loginname"); alert(userService.getToken()); $scope.menu=[]; menuService.initMenu(loginname,token,function(menu){ $scope.menu=menu; $scope.$broadcast("menuLoaded"); }); $scope.displaySwitch=function(index){ if($scope.menu[index].isShow) $scope.menu[index].isShow=false; else $scope.menu[index].isShow=true; }; }); })(window.angular);
menu.js
(function(angular){ if(!app) app={}; if(!app.main) angular.module('app.main', []); .directive('menu', function($compile) { return { restrict: 'A', replace: false, priority: 999, link: function ($scope, $elem, attrs) { $scope.$on("menuLoaded", function (event, args) { var tableRow = ""; angular.forEach($scope.menu, function (item) { var sub=''; var subLi=''; if(item.main){ sub=[ '<a href="'+item.url+'" class="home-icon">', '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.history){ sub=[ '<a href="'+item.url+'" class="sub-icon">', '<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.sub){ sub=[ '<a href="#" class="menu1" ng-click="displaySwitch('+item.index+')">', '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>', item.name, '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>', '</a>' ].join(''); subLi='<ul class="cl-effect-2" ng-show="menu['+item.index+'].isShow">'; for(var i=0;i<item.sub.length;i++){ subLi=subLi+['<li>', '<a href="'+item.sub[i].url+'">', item.sub[i].name, '</a>', '</li>' ].join(''); } subLi=subLi+'</ul>'; }else{ sub=[ '<a href="'+item.url+'" class="sub-icon">', '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>', item.name, '</a>' ].join(''); } tableRow = tableRow+['<li ', item.main "active"' : '', '>', sub, '</li>', subLi ].join(''); }); $elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; }); })(window.angular);
如果同时加载这三个js就会存在之前说的问题,分别加载app.js和menuController.js或者app.js和menu.js就不会存在问题。
不过知道问题的原因后就好解决问题了,把返回的app对象的应用给到全局变量,每个js判断是不是存在这个全局变量,如果存在,则用该变量。否则再通过module进行获得。
app.js
(function(angular){ app={}; app.main=angular.module('app.main', ['app.login'] ); })(window.angular);
menuController.js
(function(angular){ if(!app) app={}; if(!app.main) app.main=angular.module('app.main', []); app.main.controller('MenuController',function($scope,menuService,userService){ var loginname=Cookies.getCookieValue("loginname"); var token=Cookies.getCookieValue("token"); Cookies.delCookieValue("token"); Cookies.delCookieValue("loginname"); alert(userService.getToken()); $scope.menu=[]; menuService.initMenu(loginname,token,function(menu){ $scope.menu=menu; $scope.$broadcast("menuLoaded"); }); $scope.displaySwitch=function(index){ if($scope.menu[index].isShow) $scope.menu[index].isShow=false; else $scope.menu[index].isShow=true; }; }); })(window.angular);
menu.js
(function(angular){ if(!app) app={}; if(!app.main) app.main=angular.module('app.main', []); app.main.directive('menu', function($compile) { return { restrict: 'A', replace: false, priority: 999, link: function ($scope, $elem, attrs) { $scope.$on("menuLoaded", function (event, args) { var tableRow = ""; angular.forEach($scope.menu, function (item) { var sub=''; var subLi=''; if(item.main){ sub=[ '<a href="'+item.url+'" class="home-icon">', '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.history){ sub=[ '<a href="'+item.url+'" class="sub-icon">', '<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.sub){ sub=[ '<a href="#" class="menu1" ng-click="displaySwitch('+item.index+')">', '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>', item.name, '<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>', '</a>' ].join(''); subLi='<ul class="cl-effect-2" ng-show="menu['+item.index+'].isShow">'; for(var i=0;i<item.sub.length;i++){ subLi=subLi+['<li>', '<a href="'+item.sub[i].url+'">', item.sub[i].name, '</a>', '</li>' ].join(''); } subLi=subLi+'</ul>'; }else{ sub=[ '<a href="'+item.url+'" class="sub-icon">', '<span class="glyphicon glyphicon-film" aria-hidden="true"></span>', item.name, '</a>' ].join(''); } tableRow = tableRow+['<li ', item.main "active"' : '', '>', sub, '</li>', subLi ].join(''); }); $elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; }); })(window.angular);
以上就是小编为大家带来的浅谈angularjs module返回对象的坑(推荐)全部内容了,希望大家多多支持~
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《地狱潜者2》玩家人数飙升:终于不再削弱玩家了
- 黑神话引力!外媒分享孙悟空英文书籍:美生中国人等
- 《荒野大镖客》PC版曝光!《GTA6》疑似也有PC版
- 林宥嘉.2008-神秘嘉宾(引进版)【华研国际】【WAV+CUE】
- 徐小凤.1997-金曲精选(康艺经典珍藏系列)【康艺成音】【WAV+CUE】
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 交错战线研发中心推荐角色一览
- 交错战线合成工厂推荐角色一览
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]