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. JAVA经典总结

    Java经典实例(第二版) 1. 获取环境变量 Java代码 1. System.getenv("PATH"); 2. System.getenv("JAVA_HOME& ...

  2. QMainWindow: No such file or directory 问题的解决方法

    这种问题往往是由于QT4的程序转换到QT5所导致的,在.pro文件中加上一句 greaterThan(QT_MAJOR_VERSION, 4): QT += widgets 就可以解决问题

  3. Java发送短信

    1.接口使用介绍 发送短信肯定需要使用第三方接口,Java本身是肯定不能直接发送短信的.第三方接口有很多,这里直接找个正规靠谱一点的学习一下 这里使用了中国网建(http://sms.webchine ...

  4. Python面向对象的三大特征 --- 封装、继承、多态

    一.封装 1)封装:是面向对象的一大特点:将属性和方法封装在一个抽象类中.外界使用类创建对象,然后让对象调用内部方法.对象方法的细节都被封装在类的内部. class Person():   def _ ...

  5. LINUX系统下的shell命令---diff、cut、sort、uniq等

    1)diff:比较两个文件或目录的不同    -b      不检查空格字符的不同    -B      不检查空白行    -c      显示全部内容,并标出不同之处    -i      不检查 ...

  6. Unity3D 屏幕空间雪场景Shader渲染

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  7. nodejs——js 实现webSocket 兼容移动端

    nodejs——js 实现webSocket 兼容移动端 //服务器端 //npm install --save ws const express = require('express'); cons ...

  8. 产生num个不重复的随机数组

    createDiffRandom : function (from,to,num) { // 产生num个不重复的随机数组 var arr=[],json={}; // 随机数数组 , 标记json对 ...

  9. height 与 min-height 的继承

    min-height: inherit; 继承父元素的 min-height: 80px; 但,不能继承父元素的 height: 200px; height: inherit; 能继承父元素的: he ...

  10. NSLog 打印出方法函数,行数,内容

    #if DEBUG #define NSLog(FORMAT, ...) fprintf(stderr,"\nfunction:%s line:%d content:%s\n", ...