首页
所有分类
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 相关文章推荐
Node.js中require的工作原理浅析
Jun 24 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
js转换对象为xml
Feb 17 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 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
原理(1) 单管机(1) 音箱(1) 电路(15) BOSE(2) 耳机(1) AM(1) 春雷3P7(1) ICF-2010(1) 探测器(1)
You might like
详解Grunt插件之LiveReload实现页面自动刷新（两种方案）
2015/07/31 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
javascript实现轮显新闻标题链接
2007/08/13 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Seajs源码详解分析
2019/04/02 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python3.6实现学生信息管理系统
2019/02/21 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
阿迪达斯奥地利官方商城：adidas.at
2016/10/16 全球购物
全球摩托车装备领导者：RevZilla
2017/09/04 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
职工运动会邀请函
2014/02/02 职场文书
校园广播稿精选
2014/10/01 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
家长必看：义务教育，不得以面试 评测等名义选拔学生
2019/07/09 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL