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





原文地址:https://www.cnblogs.com/evaling/p/7686281.html