淺談angularjs module返回對(duì)象的坑(推薦)
更新時(shí)間：2016年10月21日 10:11:09 投稿：jingxian
下面小編就為大家?guī)?lái)一篇淺談angularjs module返回對(duì)象的坑(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
通過(guò)將module中不同的部件拆分到不同的js文件中，在組裝的時(shí)候發(fā)現(xiàn)module存在一個(gè)奇怪的問(wèn)題，不知道是不是AngularJS的bug。至今沒(méi)有找到解釋。
問(wèn)題是這樣的，按照理解，angular.module('app.main', []);這樣一句話相當(dāng)于從app.main命名空間返回出一個(gè)app對(duì)象。那么，不論在任何js文件中，我通過(guò)該方法獲得的app變量所儲(chǔ)存的指針都應(yīng)該指向唯一的一個(gè)堆內(nèi)存，而這個(gè)內(nèi)存中存儲(chǔ)的就是這個(gè)app對(duì)象。這種操作在module的js文件，和controller的js文件，service的js文件中確實(shí)是沒(méi)有問(wèn)題的，是同一個(gè)對(duì)象。但是再加入directive的時(shí)候，這個(gè)app對(duì)象居然沒(méi)有被module注冊(cè)。為什么沒(méi)有被注冊(cè)，結(jié)論自然是返回的這個(gè)app變量所指向的對(duì)象不再是我們注冊(cè)的那個(gè)。
也就是如果像下面這樣寫(xiě)就會(huì)有問(wèn)題：
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);
如果同時(shí)加載這三個(gè)js就會(huì)存在之前說(shuō)的問(wèn)題，分別加載app.js和menuController.js或者app.js和menu.js就不會(huì)存在問(wèn)題。
不過(guò)知道問(wèn)題的原因后就好解決問(wèn)題了，把返回的app對(duì)象的應(yīng)用給到全局變量，每個(gè)js判斷是不是存在這個(gè)全局變量，如果存在，則用該變量。否則再通過(guò)module進(jìn)行獲得。
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);
以上就是小編為大家?guī)?lái)的淺談angularjs module返回對(duì)象的坑(推薦)全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要介紹了Angular2 http jsonp的實(shí)例詳解的相關(guān)資料,希望通過(guò)本能幫助到大家，需要的朋友可以參考下2017-08-08
Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能,結(jié)合實(shí)例形式分析了AngularJS針對(duì)字符串的輸入判定及實(shí)時(shí)顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
3個(gè)可以改善用戶(hù)體驗(yàn)的AngularJS指令介紹
這篇文章主要介紹了3個(gè)可以改善用戶(hù)體驗(yàn)的AngularJS指令,AngularJS是一款具有很高人氣的JavaScript框架,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了詳解Angular 4.x NgIf，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
詳解AngularJS用Interceptors來(lái)統(tǒng)一處理HTTP請(qǐng)求和響應(yīng)
本篇文章主要介紹了AngularJS用Interceptors來(lái)統(tǒng)一處理HTTP請(qǐng)求和響應(yīng) ，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-06-06 
這篇文章主要介紹了Angular4表單驗(yàn)證代碼詳解 ,需要的朋友可以參考下
2017-09-09 
Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
下面小編就為大家分享一篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12 
本篇文章主要介紹了Angular4中常用管道，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09 
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-05-05