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函数之后执行一次,数值的改变要监听其变换。