angularjs指令通信及引用ngmodel双向数据绑定

angular指令数据通信
指令常见的通信方式(相对于父级作用域)

directive('myDirective',function(){
   return{
   restrict:'AE',
    scope:{
      name:'='  //和指令上的name属性对应的数据进行双向绑定
      name2:'@myname'//和指令上的myname属性进行单向数据绑定
      changes:'&mychanges'//执行指令中的changes方法等于执行父级mychanges方法
    }
}
})

}
指令的一大作用就是封装和父级作用域无关联,无耦合关系的功能模块
所有scope最好是{}
那么如何进行数据通信
用require:'ngModel’
作用:
1,父级改变,指令中也改变,
2,指令中数据改变,父级也会改变
完整指令写法:

    direactive('myDirective',function(){
    restrict:'AE',
     require: 'ngModel',//申明依赖angularjs内置ngmodel指令
    scope:{
      name:'='  //和指令上的name属性对应的数据进行双向绑定
      name2:'@myname'//和指令上的myname属性进行单向数据绑定
      changes:'&mychanges'//执行指令中的changes方法等于执行父级mychanges方法
    }
    link:function(scope,el,attr,ngModelCtr){
      //将父级作用域的中的数据更新到指令中viewModel中
             ngModelCtr.$formatters.push(function (modelvalue) {
                    return modelvalue;
                });

       // 渲染模板变量
                ngModelCtr.$render=function () {
                    scope.nametwo=ngModelCtr.$viewValue;
                };
                
       //监控变量变化更新model数据
 
                     scope.$watch('nametwo',function (newVal,oldVal) {
                  ngModelCtr.$setViewValue(scope.nametwo);
                  scope.mychanges();
                });
      //将数据同步到父级scope   
                ngModelCtr.$parsers.push(function (viewValue) {
                    return viewValue;
                })
   

})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值