1. 程式人生 > >Angularjs指令scope物件無法傳值

Angularjs指令scope物件無法傳值

在使用AngularJS的過程中遇到一個奇葩問題,現已解決,寫篇水文分享分享。

自定義一個指令,如下

angular.module("dddReferenceDisplayApp",[])
.directive("dreferenceDisplay",function($rootScope,$compile,ngDialog)
{
	return{
		restrict:'E',

		scope:{
			displayModel:'=',
			displayField:'@',
			
		},
		controller:function($scope,$transclude,$compile,$element)
		{
			$scope.show = $scope.displayModel[$scope.displayField];
		},
		templateUrl:'compents/dddreference/asset/refrenceDisplayTemplate.html',
	}
});

使用指令的地方如下:

<div class="form-group">
	<label class="col-md-2 control-label" for="codeType.name"> 型別: </label>
	<div class="col-md-10">
	    <dreferencedisplay display-model="codeTable.codeType" display-field="name"></dreferencedisplay>
	</div>
</div>
執行效果如下:

在指令中斷點除錯的結果如下:

很明顯我們使用指令的地方的cdeTable.codeType這個物件沒有傳過去,我就納悶了繫結策略的“=”不應該是雙向繫結麼,為什麼物件會傳不過去呢。

今天早上來到實驗室專門做了一個測試,自己在js檔案中new了一個物件再來使用這個指令就發現竟然又能夠傳過去了,當時我就震驚了。

這時候恍然大悟,之前不能夠傳物件的原因是因為我的cdeTable.codeType不是在js檔案裡面建立的物件,而是通過http請求從後臺請求到的物件。在請求還沒有完成之前指令就完成了編譯連結等工作,而此時cdeTable這個物件並沒有值,所以在指令中當然就不能夠使用了。

解決辦法:針對這種傳給指令的物件是從後臺請求過來的情況個人的解決方法是在指令的controller中寫一個監聽,程式碼如下

controller:function($scope,$transclude,$compile,$element)
{
	$scope.show = $scope.displayModel[$scope.displayField];
	$scope.$watch("displayModel",function(newVal,oldVal){
		console.log("變化  ");
		console.log("old : "+oldVal);
		console.log("new : "+newVal);
	});
}
將指令的controller改成上圖後的執行效果如下:

耶!大功告成