angularjs module返回对象的坑

深碍√TFBOYSˉ_ 2022-07-15 14:55 133阅读 0赞

通过将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);

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS权威教程第3章模块Module

AngularJS权威教程第3章模块Module 3.1.模块在AngularJS中，模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应

灰太狼/ 2022年08月18日 12:10/ 0 赞/ 206 阅读

相关 AngularJS移动开发中的坑汇总

使用AngualrJs开发移动App已经快半年了，逐渐积累了很多AngularJS的问题，特别是对于用惯了Jquery的开发者，转到AngularJS还是需要克服很

灰太狼/ 2022年08月11日 00:39/ 0 赞/ 195 阅读

相关 AngularJS学习（三）——Module和Scope

为什么使用Module? 使用Module的原因是，把AngularJS的JS代码写到HTML文件内不好，要抽取出来成为独立的app.js文件。app里面可以定义一个或多

骑猪看日落/ 2022年08月08日 06:23/ 0 赞/ 179 阅读

相关 Angularjs promise对象解析

1、先来看一段Demo，看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑，使用ng的promise有何优势？ <table style="border-

墨蓝/ 2022年07月21日 12:21/ 0 赞/ 179 阅读

相关 Angularjs promise对象解析

1、先来看一段Demo，看完这个demo你可以思考下如果使用$.ajax如何处理同样的逻辑，使用ng的promise有何优势？ <table style="border-

﹏ヽ暗。殇╰゛Y/ 2022年07月19日 02:28/ 0 赞/ 174 阅读

相关 angularjs module返回对象的坑

通过将module中不同的部件拆分到不同的js文件中，在组装的时候发现module存在一个奇怪的问题，不知道是不是angularjs的bug。至今没有找到解

深碍√TFBOYSˉ_/ 2022年07月15日 14:55/ 0 赞/ 134 阅读

相关 AngularJS 指令对象的Scope属性

代码： <!DOCTYPE html> <html ng-app="MyModule"> <head> <meta charset=

我会带着你远行/ 2022年06月11日 04:30/ 0 赞/ 201 阅读

相关 angularJs监听器的实现及排坑

var app = angular.module('roleManage', []); app.directive('onFinishRenderFilt

桃扇骨/ 2022年04月15日 02:53/ 0 赞/ 108 阅读

相关淡淡理解下AngularJS中的module

在AngularJS中module是一个核心的存在，包括了很多方面，比如controller, config, service, factory, directive, con

爱被打了一巴掌/ 2021年11月02日 12:58/ 0 赞/ 270 阅读

相关 AngularJS自定义Directive不一定返回对象

AngularJS中，当需要自定义Directive时，通常返回一个对象，就像如下的写法： angular.module('modulename')

╰半夏微凉°/ 2021年11月02日 12:56/ 0 赞/ 287 阅读