A brief talk on Angularjs module returns the object's pit (recommended) _angularjs

By splitting the different parts of the module into different JS files, it is found that the module has a strange problem when it is assembled, and I don't know if it is a angularjs bug. No explanation has been found so far.

The problem is this, according to the understanding, Angular.module (' App.main ', []); Such a remark is equivalent to returning an App object from the App.main namespace. So, whether in any JS file, the app variable that I get from this method should point to a unique heap memory, which is stored in this App object. This operation in the module JS file, and Controller JS file, service JS file is indeed no problem, is the same object. But when we joined directive, the app object was not registered with module. Why is it not registered, the conclusion that the app variable is returned is no longer the one we registered with.

That is, if you write like this, there will be a problem:

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].ur l+ ' > ', Item.sub[i].name, ' </a> ', ' </li> '].jo
	    				In (");
	    			} 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);

If you load the three JS at the same time will exist before the problem, loading app.js and menucontroller.js or App.js and menu.js will not have problems.

But know the cause of the problem and then solve the problem, the return of the App object to the global variable, each JS to determine whether there is this global variable, if it exists, then use the variable. Otherwise, it is obtained by 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].ur l+ ' > ', Item.sub[i].name, ' </a> ', ' </li> '].jo
	    				In (");
	    			} subli=subli+ ' </ul> ';  }else{sub=[' <a href= ' +item.url+ ' class= ' Sub-icon ' > ', ' <span class= ' Glyphicon Glyphicon-film "aria-hidden=" true ">&Lt;/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);

The above is a small series for everyone to talk about Angularjs module returns the object of the pit (recommended) All the content, I hope that we support the cloud-Habitat Community ~