通过将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+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.history){ sub=[ '<a href="'+item.url+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.sub){ sub=[ '<a href="#" ng-click="displaySwitch('+item.index+')">', '<span aria-hidden="true"></span>', item.name, '<span aria-hidden="true"></span>', '</a>' ].join(''); subLi='<ul 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+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); } tableRow = tableRow+['<li ', item.main "' : '', '>', 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+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.history){ sub=[ '<a href="'+item.url+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); }else if(item.sub){ sub=[ '<a href="#" ng-click="displaySwitch('+item.index+')">', '<span aria-hidden="true"></span>', item.name, '<span aria-hidden="true"></span>', '</a>' ].join(''); subLi='<ul 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+'">', '<span aria-hidden="true"></span>', item.name, '</a>' ].join(''); } tableRow = tableRow+['<li ', item.main "' : '', '>', sub, '</li>', subLi ].join(''); }); $elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; }); })(window.angular);

以上就是小编为大家带来的浅谈angularjs module返回对象的坑(推荐)全部内容了，希望大家多多支持查字典教程网~

【浅谈angularjs module返回对象的坑(推荐)】相关文章：

★ js控制excel打印完美解决方案

★ AngularJS的内置过滤器详解

★ 深入理解JavaScript的React框架的原理

★ 浅谈JavaScript中的Math.atan()方法的使用

★ 浅谈javascript中的闭包

★ 浅谈angularJS 作用域

★ AngularJs中route的使用方法和配置

★ javascript使用Promise对象实现异步编程

★ jquery读取xml文件实现省市县三级联动的方法

★ javascript中clipboardData对象用法