首页
所有分类
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 相关文章推荐
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
tab栏切换原理
Mar 22 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
微信小程序模板（template）使用详解
Jan 31 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
es6数值的扩展方法
Mar 11 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 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
SandBox(1) callback(1) 热力图(1) RTX 3050 ti(1) cudn(1) OpenFeign(1) Git(3) webpack(1) swing(1) cudnn(1)
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP7.0版本备注
2015/07/23 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php-msf源码详解
2017/12/25 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
详解python单元测试框架unittest
2018/07/02 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python连接mysql有哪些方法
2020/06/24 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
澳大利亚小众服装品牌：Maurie & Eve
2018/03/27 全球购物
英国家电购物网站：Sonic Direct
2019/03/26 全球购物
eDreams德国：南欧领先的在线旅游公司
2020/12/07 全球购物
金讯Java笔试题目
2013/06/18 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
自荐书范文范例
2014/02/13 职场文书
霸气队列口号
2014/06/18 职场文书
大四学生个人总结
2015/02/15 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技