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. 安装Linux环境

    虚拟机:虚拟机(Virtual Machine),在计算机科学中的体系结构里,是指一种特殊的软件,他可以在计算机平台和终端用户之间建立一种环境,而终端用户则是基于这个软件所建立的环境来操作软件.在计算 ...

  2. 【转】ubuntu下如何将笔记本自带的键盘关闭

    想必大家都经历过这样的情况:在使用usb接口的外接键盘的时候,很容易按到笔记本自带的键盘,从而导致输入错误.尤其是你将外接键盘放在笔记本键盘上面的时候.怎么解决这个问题呢? 搜索之后,找到了答案.注意 ...

  3. Disruptor快速入门

    在JDK的多线程与并发库一文中, 提到了BlockingQueue实现了生产者-消费者模型 BlockingQueue是基于锁实现的, 而锁的效率通常较低. 有没有使用CAS机制实现的生产者-消费者? ...

  4. 前台cookie的操作

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. COW写时复制

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  6. mybatis环境搭建和开发步骤

    环境搭建 第一步:导入jar包 第二步:导入核心配置文件(mybatis-config.xml) <?xml version="1.0" encoding="UTF ...

  7. flowable EngineConfiguration的实现分析(2)

    EngineConfiguration的实现类是一个抽象类:AbstractEngineConfiguration 一.引擎配置的分类 继承 AbsractEngineConfiguration的子类 ...

  8. Intellij IDEA创建包(package)问题解决方案

    问题 在使用IDEA创建包时会出现这样一种场景,就是当一个空包很长时,比如com.secbro.drools.model.这个时候如果你想给drools或model创建同级的包,你会发现,默认创建的包 ...

  9. if条件判断

    if 条件判断的是布尔值,常用的有以下几种 1.in 在不在它里面,返回的是布尔值 names='zhangsan lisi xiaoming' print("zhangsan" ...

  10. List connected users–similar to task manager

    class Program { [DllImport("wtsapi32.dll")] static extern IntPtr WTSOpenServer([MarshalAs( ...