通過將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返回對象的坑(推薦)全部內容了，希望大家多多支持武林網~
新聞熱點
疑難解答
