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



angualrJS(mvc)指令嵌套使用的一些问题的更多相关文章

  1. angular(mvc)指令的嵌套使用

    关于指令嵌套的使用,取值问题. 原理类似于控制器中使用指令,父指令类似于控制器,子指令就类似于控制器中指令.通过传值方式‘=’,我们直接可以在父指令中获取数据 举一个例子: 有个指令parentDir ...

  2. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

  3. angular2的ngfor ngif指令嵌套

    angular2的ngfor ngif指令嵌套 ng2 结构指令不能直接嵌套使用,可使用<ng-container>标签来包裹指令 示例如下: <ul> <ng-cont ...

  4. --@angularJS--较复杂的指令嵌套demo——综合小实例:登陆界面

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  5. Spring MVC Ajax 嵌套表单数据的提交

    概述 在一些场景里,某个大表单里常常嵌套着一个或若干个小逻辑块,比如以下表单里"设计预审"中包括了一个子模块表单"拟定款项". 在这种情况下该怎么去设计实体类以 ...

  6. ASP.NET MVC Layout 嵌套

    模板页Layout.cshtml代码(路径"~/Views/Backstage/MachineMng/Layout.cshtml"): @{ ViewBag.Title = &qu ...

  7. 解开神秘面纱之“AngualrJS 中指令相关的嵌入作用域和模板作用域”

    原文:https://www.airpair.com/angularjs/posts/transclusion-template-scope-in-angular-directives#r1 原标题: ...

  8. angular 实例笔记之嵌套指令间的传参

    最近在项目中遇到了需要嵌套指令的情况,指令在嵌套后子指令必须获得父指令中的数据来进行判断,但是在写传参的时候遇到了坑,因此记录下来,防止以后遗忘,个人的肤浅理解,欢迎大家留言讨论 首先,关于direc ...

  9. AngularJs自定义指令--执行顺序 (原文:http://www.cnblogs.com/sagacite/p/4624227.html)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows音频SDK的发展历程

    WASAPI is one of several native audio libraries in Windows. PortAudio actually supports five of them ...

  2. Pytorch CNN的各种参数

    class Model(torch.nn.Module): def __init__(self): super(Model, self).__init__() self.conv1 = torch.n ...

  3. Struts2的Convention插件

    Struts2的Convention插件的作用:在Struts2中的/lib/struts2-convention-plugin-x.x.xx.x.jar Convention插件会自动搜索位于act ...

  4. Java 进阶7 并发优化 1 并行程序的设计模式

       本章重点介绍的是基于 Java并行程序开发以及优化的方法,对于多核的 CPU,传统的串行程序已经很好的发回了 CPU性能,此时如果想进一步提高程序的性能,就应该使用多线程并行的方式挖掘 CPU的 ...

  5. hdu 6092 Rikka with Subset(逆向01背包+思维)

    Rikka with Subset Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  6. HDU 2669 Romantic (扩展欧几里得定理)

    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  7. jQuery Ajax同步参数导致浏览器假死怎么办

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下.   事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的 ...

  8. Maven入门-2.Maven一些核心概念介绍

    1.Maven仓库2.Maven坐标3.Maven插件和目标4.Maven生命周期4.1 clean:清理项目4.2 default:构建项目(重要)4.3 site:建立项目站点 1.Maven仓库 ...

  9. Django中类视图的简介及使用

    类视图 1 类视图引入 以函数的方式定义的视图称为函数视图,函数视图便于理解.但是遇到一个视图对应的路径提供了多种不同HTTP请求方式的支持时,便需要在一个函数中编写不同的业务逻辑,代码可读性与复用性 ...

  10. 剑指offer--41.扑克牌顺子

    没有判断数组长度,导致{1,3,2,5,4}输出结果是false是什么鬼??? ------------------------------------------------------------ ...