日期选择器组件之间的控制器间通信
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了日期选择器组件之间的控制器间通信相关的知识,希望对你有一定的参考价值。
我想在AngularJS中链接两个日期选择器组件。基本上,我使用两个输入字段来选择日期范围。一旦用户选择开始日期,应限制结束日期的日期选择器,并且仅允许在开始日期之后进行选择。
但是,每个日期选择器都是由它自己的控制器定义的,我想,由于范围不同,它们不共享模型。
这是一个简化的例子:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1"></div>
</div>
</div>
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2"></div>
</div>
</div>
如何在第一个控制器中设置options2.minDate
属性,以便第二个控制器可以正确读取它?有没有简单的方法可以做到这一点,而不会引入太多的开销?
答案
仅将控制器实例化一次:
<div ng-controller="DatepickerDemoCtrl">
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.startDate"
ng-change="options2.minDate = contract.startDate"
datepicker-options="options1">
</div>
</div>
̶<̶/̶d̶i̶v̶>̶
̶<̶d̶i̶v̶ ̶n̶g̶-̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶=̶"̶D̶a̶t̶e̶p̶i̶c̶k̶e̶r̶D̶e̶m̶o̶C̶t̶r̶l̶"̶>̶
<div style="display: inline-block; min-height: 290px;">
<div uib-datepicker ng-model="contract.endDate"
datepicker-options="options2">
</div>
</div>
</div>
然后将共享范围。
以上是关于日期选择器组件之间的控制器间通信的主要内容,如果未能解决你的问题,请参考以下文章