浅谈angularjs module返回对象的坑(推荐)
更新时间：2016年10月21日 10:11:09 投稿：jingxian
下面小编就为大家带来一篇浅谈angularjs module返回对象的坑(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通过将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返回对象的坑(推荐)全部内容了，希望大家多多支持脚本之家~
相关文章
Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。接下来通过本文给大家介绍AngularJS实用开发技巧的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了AngularJS创建一个上传照片的指令实例代码,需要的朋友可以参考下2018-02-02
Angular入口组件（entry component）与声明式组件的区别详解
这篇文章主要给大家介绍了关于Angular入口组件（entry component）与声明式组件的区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
本篇文章主要介绍了Angularjs使用指令做表单校验的方法，详细的介绍了用指令做校验的方法，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
AngularJS的ng Http Request与response格式转换方法
这篇文章主要介绍了AngularJS的ng Http Request与response格式转换方法,结合实例形式分析了AngularJS实现Request与response格式转换操作的相关设置与使用技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了Angularjs 制作购物车功能实例代码的相关资料,并附示例代码，需要的朋友可以参考下2016-09-09
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用angularjs创建简单表格2016-01-01
这篇文章主要介绍了Angular Material Icon使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有功能，其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结，对angularjs动画效果相关知识感兴趣的朋友一起学习2015-12-12
AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同，脏治检查允许AngularJS监视那些存在或者不存在的变量。2015-09-09
最新评论