Angularjs 数据选择器组件之间的控制器间通信

Angularjs 数据选择器组件之间的控制器间通信,angularjs,datepicker,angularjs-scope,angular-ui-bootstrap,angularjs-controller,Angularjs,Datepicker,Angularjs Scope,Angular Ui Bootstrap,Angularjs Controller,我想在AngularJS中链接两个日期选择器组件。基本上,我使用两个输入字段来选择日期范围。一旦用户选择开始日期,结束日期的日期选择器应受到限制,并且仅允许在开始日期之后进行选择 然而,每个日期选择器都是由它自己的控制器定义的,我想,由于作用域不同,它们不会共享它们的模型 这是一个简化的示例: <div ng-controller="DatepickerDemoCtrl"> <div style="display: inline-block; min-height: 2

我想在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>
然后,范围将被共享