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

前端之家收集整理的这篇文章主要介绍了浅谈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

menuController.js

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

$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"&gt;','<span class="glyphicon glyphicon-home" aria-hidden="true"&gt;</span>',item.name,'</a>' ].join(''); }else if(item.history){ sub=[ '<a href="'+item.url+'" class="sub-icon"&gt;','<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"&gt;</span>','</a>' ].join(''); }else if(item.sub){ sub=[ '<a href="#" class="menu1" ng-click="displaySwitch('+item.index+')"&gt;','<span class="glyphicon glyphicon-film" aria-hidden="true"&gt;</span>','<span class="glyphicon glyphicon-menu-down" aria-hidden="true"&gt;</span>','</a>' ].join(''); subLi='<ul class="cl-effect-2" ng-show="menu['+item.index+'].isShow"&gt;'; for(var i=0;i<item.sub.length;i++){ subLi=subLi+['<li>','<a href="'+item.sub[i].url+'"&gt;',item.sub[i].name,'</a>','</li>' ].join(''); } subLi=subLi+'</ul>'; }else{ sub=[ '<a href="'+item.url+'" class="sub-icon"&gt;','</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

menuController.js

if(!app) app={};

if(!app.main)
app.main=angular.module('app.main',[]);
app.main.controller('MenuController',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

$elem[0].innerHTML = tableRow; $compile($elem.contents())($scope); }); } }; });

})(window.angular);

以上就是小编为大家带来的浅谈angularjs module返回对象的坑(推荐)全部内容了,希望大家多多支持编程之家~

猜你在找的JavaScript相关文章