首页
所有分类
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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）
May 10 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
浅谈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
SQLite3(1) dockerfile(1) 分布式锁(3) harbor(1) filter(1) 短信验证码(1) pytz(1) reduce(2) Selenium(1) GoFrame(3)
You might like
php函数指定默认值方法的小例子
2013/12/04 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
深入理解Python变量与常量
2016/06/02 Python
Python实现购物车功能的方法分析
2017/11/10 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python3操作注册表的方法（Url protocol）
2020/02/05 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
俄罗斯在线手表和珠宝商店：AllTime
2019/09/28 全球购物
阿联酋手表和配饰购物网站：Rivolishop
2019/11/25 全球购物
俄罗斯第一家篮球店：StreetBall
2020/07/30 全球购物
优秀技术工人先进材料
2014/02/17 职场文书
行政人事岗位职责
2014/03/17 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
通用员工手册范本
2015/05/14 职场文书