在使用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改成上图后的运行效果如下:
耶!大功告成