浅谈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=[
	    				   '',
	    				   '',
			           item.name,
				         ''
	    				  ].join('');
	    			}else if(item.history){
	    				sub=[
	    				   '',
	    					 '',
			           item.name,
				         ''
	    				  ].join('');
	    			}else if(item.sub){
	    				sub=[
	    				   '',
	    				   '',
			           item.name,
			           '',
				         ''
	    				  ].join('');
	    				subLi='
';
	    				for(var i=0;i',
	    					       '',
	    					       item.sub[i].name,
	    					       '',
	    					       ''
	    					].join('');
	    				}
	    				subLi=subLi+'
';
	    			}else{
	    				sub=[
	    				   '',
	    				   '',
			           item.name,
				         ''
	    				  ].join('');
	    			}
	    			tableRow = tableRow+['
',
	    			           sub,
	    			           '
',
	    			           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=[
	    				   '',
	    				   '',
			           item.name,
				         ''
	    				  ].join('');
	    			}else if(item.history){
	    				sub=[
	    				   '',
	    					 '',
			           item.name,
				         ''
	    				  ].join('');
	    			}else if(item.sub){
	    				sub=[
	    				   '',
	    				   '',
			           item.name,
			           '',
				         ''
	    				  ].join('');
	    				subLi='
';
	    				for(var i=0;i',
	    					       '',
	    					       item.sub[i].name,
	    					       '',
	    					       ''
	    					].join('');
	    				}
	    				subLi=subLi+'
';
	    			}else{
	    				sub=[
	    				   '',
	    				   '',
			           item.name,
				         ''
	    				  ].join('');
	    			}
	    			tableRow = tableRow+['
',
	    			           sub,
	    			           '
',
	    			           subLi
	    			].join('');
		    	});
	    		
	    		$elem[0].innerHTML = tableRow;
	    		$compile($elem.contents())($scope);
	    		
	      });

	    }
	  };
	});
})(window.angular);

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