淺談angularjs module返回對象的坑(推薦)
更新時間：2016年10月21日 10:11:09 投稿：jingxian
下面小編就為大家?guī)硪黄獪\談angularjs module返回對象的坑(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
通過將module中不同的部件拆分到不同的js文件中，在組裝的時候發(fā)現(xiàn)module存在一個奇怪的問題，不知道是不是AngularJS的bug。至今沒有找到解釋。
問題是這樣的，按照理解，angular.module('app.main', []);這樣一句話相當(dāng)于從app.main命名空間返回出一個app對象。那么，不論在任何js文件中，我通過該方法獲得的app變量所儲存的指針都應(yīng)該指向唯一的一個堆內(nèi)存，而這個內(nèi)存中存儲的就是這個app對象。這種操作在module的js文件，和controller的js文件，service的js文件中確實是沒有問題的，是同一個對象。但是再加入directive的時候，這個app對象居然沒有被module注冊。為什么沒有被注冊，結(jié)論自然是返回的這個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對象的應(yīng)用給到全局變量，每個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);
以上就是小編為大家?guī)淼臏\談angularjs module返回對象的坑(推薦)全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
Angular JS 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來通過本文給大家介紹AngularJS實用開發(fā)技巧的相關(guān)資料,需要的朋友可以參考下2016-07-07
AngularJS創(chuàng)建一個上傳照片的指令實例代碼
這篇文章主要介紹了AngularJS創(chuàng)建一個上傳照片的指令實例代碼,需要的朋友可以參考下2018-02-02
Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Angular入口組件（entry component）與聲明式組件的區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
本篇文章主要介紹了Angularjs使用指令做表單校驗的方法，詳細的介紹了用指令做校驗的方法，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
AngularJS的ng Http Request與response格式轉(zhuǎn)換方法
這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實例形式分析了AngularJS實現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angularjs 制作購物車功能實例代碼的相關(guān)資料,并附示例代碼，需要的朋友可以參考下2016-09-09
AngularJS提供豐富填寫表單和驗證。我們可以用ng-click來處理AngularJS點擊按鈕事件，然后使用 $dirty 和 $invalid標(biāo)志做驗證的方式。使用novalidate表單聲明禁止任何瀏覽器特定的驗證。下面我們來看看如何使用angularjs創(chuàng)建簡單表格2016-01-01
這篇文章主要介紹了Angular Material Icon使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
AngularJS 是一組用于創(chuàng)建單頁Web應(yīng)用的豐富框架，給構(gòu)建豐富交互地應(yīng)用帶來了所有功能，其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)，對angularjs動畫效果相關(guān)知識感興趣的朋友一起學(xué)習(xí)2015-12-12
angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定
AngularJS在$scope變量中使用臟值檢查來實現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動態(tài)設(shè)施setter和getter不同，臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。2015-09-09