浅谈angularjs module返回对象的坑（推荐）

通过将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 ? "class="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 ? "class="active"" : "", ">", sub, "</li>", subLi].join（""）;}）;$elem[0].innerHTML = tableRow;$compile（$elem.contents（））（$scope）;}）;}};}）;}）（window.angular）;

以上就是小编为大家带来的浅谈angularjs module返回对象的坑（推荐）全部内容了，希望大家多多支持脚本之家~