浅谈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);Salin selepas log masuk
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);Salin selepas log masuk
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);Salin selepas log masuk
如果同时加载这三个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);Salin selepas log masuk
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);Salin selepas log masuk
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);Salin selepas log masuk
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Penyelesaian Riddle Seashell
1 minggu yang lalu
By DDD
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Di mana untuk mencari kad kunci kawalan kren di atomfall
1 minggu yang lalu
By DDD
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Tutorial CakePHP
1371
52
1371
52