By splitting different components in the module into different js files, I found that there was a strange problem with the module during assembly. I don’t know if it was an AngularJS bug. No explanation has been found so far.
The problem is like this, according to understanding, ('', []); such a sentence is equivalent to returning an app object from the namespace. Then, no matter in any js file, the pointer stored by the app variable I obtained through this method should point to the only heap memory, and the app object stored in this memory is the app object. This operation is indeed free of problems in the module's js file, controller's js file, service's js file, and is the same object. However, when joining directive, the app object was not registered with module. Why isn't it registered? The conclusion is naturally that the object pointed to by the returned app variable is no longer the one we registered.
That is, if you write like this, there will be problems:
(function(angular){
('',
['']
);
})();
(function(angular){
('', []);
.controller('MenuController',function($scope,menuService,userService){
var loginname=("loginname");
var token=("token");
("token");
("loginname");
alert(());
$=[];
(loginname,token,function(menu){
$=menu;
$scope.$broadcast("menuLoaded");
});
$=function(index){
if($[index].isShow)
$[index].isShow=false;
else
$[index].isShow=true;
};
});
})();
(function(angular){
if(!app)
app={};
if(!)
('', []);
.directive('menu', function($compile) {
return {
restrict: 'A',
replace: false,
priority: 999,
link: function ($scope, $elem, attrs) {
$scope.$on("menuLoaded", function (event, args) {
var tableRow = "";
($, function (item) {
var sub='';
var subLi='';
if(){
sub=[
'<a href="'++'" class="home-icon">',
'<span class="glyphicon glyphicon-home" aria-hidden="true"></span>',
,
'</a>'
].join('');
}else if(){
sub=[
'<a href="'++'" class="sub-icon">',
'<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>',
,
'</a>'
].join('');
}else if(){
sub=[
'<a href="#" class="menu1" ng-click="displaySwitch('++')">',
'<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
,
'<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>',
'</a>'
].join('');
subLi='<ul class="cl-effect-2" ng-show="menu['++'].isShow">';
for(var i=0;i<;i++){
subLi=subLi+['<li>',
'<a href="'+[i].url+'">',
[i].name,
'</a>',
'</li>'
].join('');
}
subLi=subLi+'</ul>';
}else{
sub=[
'<a href="'++'" class="sub-icon">',
'<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
,
'</a>'
].join('');
}
tableRow = tableRow+['<li ',
? 'class="active"' : '',
'>',
sub,
'</li>',
subLi
].join('');
});
$elem[0].innerHTML = tableRow;
$compile($())($scope);
});
}
};
});
})();
If these three js are loaded at the same time, there will be problems mentioned earlier, and there will be no problems loading the sum or the sum respectively.
However, after knowing the cause of the problem, it is easy to solve the problem. The application of the returned app object is given to the global variable. Each js determines whether the global variable exists. If it exists, use this variable. Otherwise, it will be obtained through module.
(function(angular){
app={};
=('',
['']
);
})();
(function(angular){
if(!app)
app={};
if(!)
=('', []);
('MenuController',function($scope,menuService,userService){
var loginname=("loginname");
var token=("token");
("token");
("loginname");
alert(());
$=[];
(loginname,token,function(menu){
$=menu;
$scope.$broadcast("menuLoaded");
});
$=function(index){
if($[index].isShow)
$[index].isShow=false;
else
$[index].isShow=true;
};
});
})();
(function(angular){
if(!app)
app={};
if(!)
=('', []);
('menu', function($compile) {
return {
restrict: 'A',
replace: false,
priority: 999,
link: function ($scope, $elem, attrs) {
$scope.$on("menuLoaded", function (event, args) {
var tableRow = "";
($, function (item) {
var sub='';
var subLi='';
if(){
sub=[
'<a href="'++'" class="home-icon">',
'<span class="glyphicon glyphicon-home" aria-hidden="true"></span>',
,
'</a>'
].join('');
}else if(){
sub=[
'<a href="'++'" class="sub-icon">',
'<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>',
,
'</a>'
].join('');
}else if(){
sub=[
'<a href="#" class="menu1" ng-click="displaySwitch('++')">',
'<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
,
'<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>',
'</a>'
].join('');
subLi='<ul class="cl-effect-2" ng-show="menu['++'].isShow">';
for(var i=0;i<;i++){
subLi=subLi+['<li>',
'<a href="'+[i].url+'">',
[i].name,
'</a>',
'</li>'
].join('');
}
subLi=subLi+'</ul>';
}else{
sub=[
'<a href="'++'" class="sub-icon">',
'<span class="glyphicon glyphicon-film" aria-hidden="true"></span>',
,
'</a>'
].join('');
}
tableRow = tableRow+['<li ',
? 'class="active"' : '',
'>',
sub,
'</li>',
subLi
].join('');
});
$elem[0].innerHTML = tableRow;
$compile($())($scope);
});
}
};
});
})();
The above is the brief discussion of the pitfalls (recommended) of the angularjs module return object that the editor brings to you. I hope everyone supports me~