欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談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è)。

也就是如果像下面這樣寫就會(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)文章

  • AngularJS實(shí)用開(kāi)發(fā)技巧(推薦)

    AngularJS實(shí)用開(kāi)發(fā)技巧(推薦)

    Angular JS 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來(lái)通過(guò)本文給大家介紹AngularJS實(shí)用開(kāi)發(fā)技巧的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼

    AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼

    這篇文章主要介紹了AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼,需要的朋友可以參考下
    2018-02-02
  • Angular入口組件(entry component)與聲明式組件的區(qū)別詳解

    Angular入口組件(entry component)與聲明式組件的區(qū)別詳解

    這篇文章主要給大家介紹了關(guān)于Angular入口組件(entry component)與聲明式組件的區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-04-04
  • Angularjs使用指令做表單校驗(yàn)的方法

    Angularjs使用指令做表單校驗(yàn)的方法

    本篇文章主要介紹了Angularjs使用指令做表單校驗(yàn)的方法,詳細(xì)的介紹了用指令做校驗(yàn)的方法,具有一定的參考價(jià)值,有興趣的可以了解一下。
    2017-03-03
  • AngularJS的ng Http Request與response格式轉(zhuǎn)換方法

    AngularJS的ng Http Request與response格式轉(zhuǎn)換方法

    這篇文章主要介紹了AngularJS的ng Http Request與response格式轉(zhuǎn)換方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Request與response格式轉(zhuǎn)換操作的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
    2016-11-11
  • Angularjs 制作購(gòu)物車功能實(shí)例代碼

    Angularjs 制作購(gòu)物車功能實(shí)例代碼

    這篇文章主要介紹了Angularjs 制作購(gòu)物車功能實(shí)例代碼的相關(guān)資料,并附示例代碼,需要的朋友可以參考下
    2016-09-09
  • 使用angularjs創(chuàng)建簡(jiǎn)單表格

    使用angularjs創(chuàng)建簡(jiǎn)單表格

    AngularJS提供豐富填寫表單和驗(yàn)證。我們可以用ng-click來(lái)處理AngularJS點(diǎn)擊按鈕事件,然后使用 $dirty 和 $invalid標(biāo)志做驗(yàn)證的方式。使用novalidate表單聲明禁止任何瀏覽器特定的驗(yàn)證。下面我們來(lái)看看如何使用angularjs創(chuàng)建簡(jiǎn)單表格
    2016-01-01
  • Angular Material Icon使用詳解

    Angular Material Icon使用詳解

    這篇文章主要介紹了Angular Material Icon使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié)

    AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié)

    AngularJS 是一組用于創(chuàng)建單頁(yè)Web應(yīng)用的豐富框架,給構(gòu)建豐富交互地應(yīng)用帶來(lái)了所有功能,其中一項(xiàng)主要的特性是Angular對(duì)動(dòng)畫的支持。下面通過(guò)本文給大家介紹AngularJS中實(shí)現(xiàn)顯示或隱藏動(dòng)畫效果的方式總結(jié),對(duì)angularjs動(dòng)畫效果相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)
    2015-12-12
  • angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定

    angularjs學(xué)習(xí)筆記之雙向數(shù)據(jù)綁定

    AngularJS在$scope變量中使用臟值檢查來(lái)實(shí)現(xiàn)了數(shù)據(jù)雙向綁定。和Ember.js數(shù)據(jù)雙向綁定中動(dòng)態(tài)設(shè)施setter和getter不同,臟治檢查允許AngularJS監(jiān)視那些存在或者不存在的變量。
    2015-09-09

最新評(píng)論