发表于: 2017-01-25 11:26:22
2 1180
今天完成的事情:
萝卜多后台静态页;
又纠结了一波指令问题
成都小伙伴“最骚包”聚会;
明天计划的事情:
萝卜多公司编辑
遇到的问题:
指令写的有点儿繁杂,沁姐帮忙做了简化示范,可变参通过属性与directive内参数绑定;
想给directive内model 添加ng-change事件,change事件调用父controller内的函数vm.test(),调用参数为双向绑定的option,;
<picker options='vm.financingtype' ng-model="option" class="col-md-12" option-class="col-xs-11" ng-change="vm.test()"></picker>
scope:{
options: '=',
selectedValue: '=ngModel',
selectName: '@',
optionClass: '@',
ngChange:'&'
// ngChange:'&'
},
<select class="form-control" ng-model="selectedValue" ng-options="item.type as item.name for item in options" ng-change="ngChange()"></select>
1、直接通过ngChange:'&'调用父controller;
controller:
vm.test=function () {
console.log($scope.option+ " in controller")
}
directive:
scope.dicrtiveTest=function () {
console.log('第'+c+'轮');
console.log(scope.selectedValue+ " in directive");
scope.ngChange();
c++
}
结果:延迟输出,html页面输出的数值正确显示
2、$watch监控
directive:
scope.$watch('selectedValue',function (o,n) {
o===n?'': console.log('第'+c+'轮'),console.log(scope.selectedValue+ " in directive"),scope.ngChange(),c++;
})
输出正常结果:
3.通过传入参数调用
scope.dicrtiveTest=function () {
console.log('第'+c+'轮');
console.log(scope.selectedValue+ " in directive");
scope.ngChange().test(scope.selectedValue);
c++
}
vm.test=function () {
return {
test: function (a) {
console.log(a + " in controller")
}
}
}
输出正常结果
收获:
如上
评论