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改成上图后的运行效果如下:

耶!大功告成

  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值