controller.js

function loaderCtrl($rootScope, $scope, $location, productService, shareData, notifyService, $compile){  
	var firstLoad = false; 	
	var init = function(){
		firstLoad = true;
		$rootScope.location = $location;
		nowRoot = $rootScope.location.path();
		urlPara = nowRoot.split("/");
	}
		
	//統一監測網址變化<所有的broadcast集中到這邊 讓這邊統一換頁
	init();
	$scope.$watch(function(){return $location.path();},function(path){
		urlPara = path.split("/");
		if(firstLoad){
			if(urlPara[1]=='item' && urlPara[2]!=0){//產品頁
				shareData.p_id(urlPara[2]);
				shareData.pageName('itemView');
			}else if(urlPara[1]=='cat' && urlPara[2]!=0){//分類頁
				$rootScope.prevcat_id = shareData.cat_id();
				$scope.nowcat_id = urlPara[2];
				shareData.cat_id(urlPara[2]);
				shareData.pageName('listView');
			}else{//首頁
					
			}
		}
	});
	
	

}
menuCtrl.$inject= ['$rootScope', '$scope','$location','productService','shareData','notifyService','$compile'];

diractive.js

webApp.directive('itemView',function(){
  return {	
		restrict: 'E',
		//replace: true,
    	templateUrl: _base_url+'/directive/itemView.html',
		controller: function($rootScope, $scope, $location, productService, notifyService,shareData, $compile) {
			$rootScope.location = $location;
			nowRoot = $rootScope.location.path();
			urlPara = nowRoot.split("/");

			$scope.getItem = function(_id){
				$('#loader').show();
				productService.dataStream({gateway: 'item', p_id: _id}, function(returnData){
					if(returnData.result){
						$rootScope.cat_title = '--產品訊息：'+returnData.data.name;
						$scope.item = returnData.data;
					}else{
						$rootScope.cat_title = '';
						$("#nested_container").html('<p>查無該產品資料</p>');
					}
					$('#loader').hide();
				});
			}

			$scope.$on("pageChanged",function() {				
				if(shareData.pageName()=='itemView'){
					$scope.getItem(shareData.p_id());
					$('.category_page').hide();
					$('.item_view').show();
				}
			});	
			//first load detect
			if(urlPara[1]=='item' && urlPara[2]!=0){//產品頁	
				$scope.getItem(urlPara[2]);
				$('.category_page').hide();
				$('.item_view').show();
			}
		},
		link: function ($scope, element, attrs) {
			$('.gallery').css({'min-height':$(window).height()-100});
		}
	};
});

gistfile1.html

<ul id="side_menu" ng-controller="menuCtrl">
            <li class="menu_item" ng-repeat="item in menu" ng-class="{ active: nowcat_id== item.value }">
                <a href="#/cat/{{item.value}}" rel="{{item.value}}" >{{item.text}}</a>
                <ul class="sub_menu_wrapper">
                    <li class="sub_menu" ng-class="{ active: nowcat_id== subitem.value }" ng-repeat="subitem in item.son" nowcat_id=item.value"><a href="#/cat/{{subitem.value}}">{{subitem.text}}</a></li>
                </ul>
            </li>
            
</ul>
<div class="home_frame" id="main_frame">
    <list-view  class="category_page"></list-view>
    <item-view></item-view>
</div>
<div id="loader" style="" ng-controller="loaderCtrl">
            <center>
                <span class="loading_text">載入中..</span>
                <div class="bubbles">
                    <span></span>
                    <span id="bubble2"></span>
                    <span id="bubble3"></span>
                </div>
            </center>
</div>