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;
                })
   

})
展开阅读全文

没有更多推荐了,返回首页