angular的指令拥有一个独立作用域的概念、
一般定义指令的形式;
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
}
}
}]);
});
这里举例一个很迷惘的例子
使用指令的页面
aol.html
<div>
....
..........
<div>
<tmls-aol-info-add tmlsaolinfo="itemModel"></tmls-aol-info-add>
</div>
</div>
aol.js
......
$scope.itemModel={
AolNumber:'',
Name:'',
Abstract:'',
XsFiles:[],
XsFileIDs:''
};
...........
tlmsAolInfoAdd.js指令
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
}
}
}]);
});
tlmsAolInfoAdd.html
<div>
...........
.................
.........
<div attachment ng-model="tmlsaolinfo.Xfiles" view-array="tmlsaolinfo.XsFiles"></div> </div>
attachment.js
define(['app'],function(mianapp){
mainapp.directive("attachment",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
replace:true,
transclude:true,
scope:{
ngModel:'=',
viewArray:'='
},
link:function(s,ele,attrs){
$scope.$watch("viewArry",function(newVal,oldVal){
if(newVal){
$scope.XsFiles = newVal;
var _arr =[];
angular.forEach($scope.XsFiles,function(){
_arr.push(i_item.XsFileID);
});
$scope.ngModel = _arr.join(',');
}
else{
$scope.XsFiles =[];
}
});
}
}
}]);
});
这里细细讲一下他的使用逻辑:
我的aol页面使用一个
tlmsAolInfoAdd指令,在这个指令中也使用了一个attachment指令,并且也分别建立了自己的独立作用域(为了指令的复用),使用了“=”的双向绑定
参数itemModel、tmlsaolinfo、与attachment指令ngModel,viewArray的访问互相打通,
//当attachment中的ngModel,viewArray的值变化,在aol.js中的itemMolde也能拿到最新的值,但是问题就是行不通。
将itemModel中的XsFiles,XsFileIDs的初始值传递给attachment,但是问题就是行不通。 最终的解决是:
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
s.newtmlsaolinfo = s.tmlsaolinfo;
}
}
}]);
});
页面上:
<div attachment ng-model="newtmlsaolinfo.Xfiles" view-array="newtmlsaolinfo.XsFiles"></div> </div>
这样就可以解决从aol.js将值传递给tlmsAolInfoAdd指令,进而传给 attachment,但是attachement中的值的改变却不能通知到aol.js,
然后进一步解决
define(['app'],function(mianapp){
mainapp.directive("tlmsAolInfoAdd",[function(){
return {
templateUrl:'js/directive/...../tlmsAolInfo_add.html',
scope:{
tmlsaolinfo:'='
},
link:function(s,ele,attrs){
s.newtmlsaolinfo = s.tmlsaolinfo;
s.XsFileIDs= s.newtmlsaolinfo.XsFileIDs;
s.XsFiles =s.newtmlsaolinfo.XsFiles;
s.$watch('XsFileIDs',function(newVal,oldVal){
if(newVal) s.tmlsaolinfo.XsFielIDs = newVal;
});
}
}
}]);
});
html
<div>
...........
.................
.........
<div attachment ng-model="Xfiles" view-array="XsFiles"></div> </div>
以上的问题可能涉及到指令的生命周期问题,link函数之后执行一次,数值的改变要监听其变换。