angglarjsの徹底的な非同期解決

3336 ワード

angglarjsの非同期処理は本当に素晴らしいです。メッセージブロードキャストの方式に基づいて、かつ、上に転送することができ、異なるモジュール、異なるcontroller間の非同期的な問題を基本的に解決した。
        シーン1:コールバック関数による非同期動作(この場合はメッセージ放送を使わない仕組み)
        この場合の特徴は、非同期動作が完了するまで、1つのコールバック関数を直接伝達すればいいということです。
        例えば、controllerがserverを通じてデータを非同期で取るなど、データを取って一連の操作を行うと、この時に操作を関数にパッケージして、非同期の操作関数に渡すことができます。
        controllerコードセグメントの例は以下の通りである。
$scope.submit=function(){
	userService.login($scope.user.loginname.value,$scope.user.password.value,function(data){
		if(data.success){
			location.href = '../../views/main/index.html';
		}else{
			$scope.user.error.tip=data.msg;
		}
	});
};
         最後のパラメータはコールバック関数です。
         serverコードのセグメント例は以下の通りです。
return {
        http:$http,
	token:'',
	auth:[],
	loginname:'',
	login:function(loginname,password,fn){
	      this.http({
		url:'../../scripts/loginModule/services/loginOKTest.js',
		method:'GET'
	      })
	      .success(function(data){
		  if(data[0].success){
		     ...
                     //      
                     fn(data[0]);
		  }
	       })
	      .error(function(data,header,config,status){
		alert("        !");
	      });
	}
}
        
場面二:コールバック関数を伝えるところがないので、この時は必ず使わなければなりません。
メッセージ放送の仕組み。
         例えば、私のcontrollerはserverを通じてデータを非同期で取得します。この時、データを取り戻してから後続の操作をすることを保証します。しかし、私の後の操作は命令によってDOMを生成する必要があります。この時は直接に命令のlinkやcompleを呼び出すことはできません。この時はラジオで$scope.$broadcastを使います。放送を送ると、$scope.$onでモニターが必要です。
         controllerコードセグメントの例は以下の通りである。
//  categoryService     
categoryService.initCategory(loginname,token,function(category){
    	$scope.category=category;
    	$scope.$broadcast("categoryLoaded");
});
         サービスコードのセグメント例は以下の通りです。
initCategory:function(loginname,token,fn){
    this.http({
	url:'../../scripts/mainModule/services/mainCategory.js',
	method:'GET'
	}).success(function(data,header,config,status){
	   fn(data);
        }).error(function(data,header,config,status){
	    alert("        !");
	});
}
        directiveコードのセグメント例は以下の通りです。
link:function ($scope, $elem, attrs) {
     $scope.$on("categoryLoaded", function (event, args) {
            //$scope.category         
     }
}
最後に、もし私たちがこのcontrolerの中で他のモジュールの命令のlinkまたはcomppileまたは他のモジュールのcontrollerを呼び出す必要があるなら、どうすればいいですか?依存注入による
$rootScopeサービスは、彼がすべてのスコープの父親であるため、呼び出します。
$emitというサービスを放送します。命令は$rootScope.$onで受信すればいいです。
        モジュール1(ap.video)におけるcontrollerコードのセグメント例は以下の通りである。
$scope.replay=function(id){
    console.log("click replay id:"+id);
    clearReply();
    //  $rootScope     app.dialog   controller
    $rootScope.$emit("openTemplate","reply.html");
};
       モジュール2(ap.dialog)におけるcontrollerコードのセグメント例は以下の通りである。
$rootScope.$on('openTemplate',function(event, toState, toParams, fromState, fromParams){
    	$scope.openTemplate(toState);
});
    	
$scope.openTemplate = function (url) {
    	if(!url)
    	   url="/ZVideo-MVC/dialog/defaultTemplate.html";
        $scope.value = true;
        ngDialog.open({
           template: url,
           className: 'ngdialog-theme-plain',
           scope: $scope
        });
};