首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

浅谈angularjs module返回对象的坑(推荐)

Posted in Javascript onOctober 21, 2016

通过将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返回对象的坑(推荐)全部内容了，希望大家多多支持三水点靠木~

浅谈angularjs module返回对象的坑(推荐)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
js实现验证码功能
Jul 24 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 #Javascript
基于angularJS的表单验证指令介绍
Oct 21 #Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 #Javascript
connection reset by peer问题总结及解决方案
Oct 21 #Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 #Javascript
js制作支付倒计时页面
Oct 21 #Javascript
保证书(97) 计划书(118) 制度(225) 请假条(31) 接收函(23) 活动总结(790) 评语(336) 寄语(276) 感谢信(72) 倡议书(159)
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
纯CSS3大转盘抽奖示例代码（响应式、可配置）
2017/01/13 HTML / CSS
阿波罗盒子：Apollo Box
2017/08/14 全球购物
SQL面试题
2013/12/09 面试题
视图的作用
2014/12/19 面试题
资金主管岗位职责范本
2014/03/04 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
怒海潜将观后感
2015/06/11 职场文书
温馨祝福晨语：美丽的一天从我的问候开始
2019/11/28 职场文书