angualrJS（mvc）指令嵌套使用的一些问题

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