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函數以後執行一次，數值的改變要監聽其變換。