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. MySQL的登陆错误:ERROR 1049 (42000): Unknown database 'root'

    当初刚装MySQL的时候,到网上查的命令行登陆MySQL的方法都是mysql -u root -p password mysql -r root -p 123456 但是奇怪的是这条命令我输进去死活都 ...

  2. ansible入门三(Ansible的基础元素和YAML介绍)

    Ansible的基础元素和YAML介绍   本节内容: YAML Ansible常用的数据类型 Ansible基础元素 一.YAML 1. YAML介绍 YAML是一个可读性高的用来表达资料序列的格式 ...

  3. 【51nod-1315】合法整数集(数位)

    [思路] 既然是or操作,将数转化为二进制,数位是1,对应的数组元素+1,再将x转为成二进制,只要查找X为1的位置,将之前存放的数组数字找个最小的输出就可以了. 但是并不是所有的数都要参与or,因为有 ...

  4. C#中使用GUID

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  5. 添加git 忽略文件

    在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交. Git 忽略文件提交的方法 有三种方法可以实现忽略Gi ...

  6. 【html5】hashchange Event – 监测URL的hash变化

    通过URL传值,在?后附加以=连接的键值对,各键值对间以&连接:也可以通过URL传递页面参数,在”#”后附加的方式.两者最大的一个 区别在于:后者不会发起请求,不会导致页面刷新.常见应用场景在 ...

  7. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

  8. PostgreSQL备份工具-pg_backrest(转)

    转自:http://blog.chinaunix.net/uid-7270462-id-5777877.html 官网:https://pgbackrest.org 一.配置集中备份服务器 1.1 备 ...

  9. mac svn: E210004: Number is larger than maximum

    SVN服务器IP地址发现改变,在Eclipse中的SVN资源库中执行Relocate重定位时发生错误: mac svn: E210004: Number is larger than maximum ...

  10. FFmpeg再学习 -- FFmpeg解码知识

    继续看雷霄骅的 课程资料 - 基于FFmpeg+SDL的视频播放器的制作 前面用了五个篇幅来讲 FFmpeg,其主要目的是为实现将图片转视频的功能. 总的来说,对于 FFmepg 多少有一些了解了.但 ...