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