我正在创建一个带有多个angular-ui datepickers和一些输入数据的表单.
对于日期选择器,我创建了一个控制器和一个父表单控制器,如下面给出的示例.表单控制器具有包含日期选择器日期的模型.
对于日期选择器,我创建了一个控制器和一个父表单控制器,如下面给出的示例.表单控制器具有包含日期选择器日期的模型.
JS：
var app = angular.module('app',['ui.bootstrap']);
app.controller('dateCntrl',function($scope,$timeout){
$scope.open = function() {
$timeout(function() {
$scope.opened = true;
});
};
});
app.controller('formCntrl',$http){
$scope.model = {name:'',startDate:'',endDate:''};
});
HTML：
<form ng-controller="formCntrl">
<input type="text" id="name" placeholder="Name" ng-model="model.name" />
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="model.startDate" id="startDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="model.endDate" id="endDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
</form>
>我是否正确地为datepicker设置了一个单独的控制器.这将作为所有日期输入的通用控制器
>如果是,是否可以使用通用方法将datepicker控制器中的数据绑定回父控制器中的模型日期(本例中为model.startDate,model.endDate).
>有没有其他方法可以解决这个问题.
感谢致敬.
解决方法
应该阅读有关
scope inheritance的更多信息
可以使用$parent访问父作用域值
<form ng-controller="formCntrl">
<input type="text" id="name" placeholder="Name" ng-model="model.name" />
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.startDate" id="startDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
<div ng-controller="dateCntrl">
<input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.endDate" id="endDate" type="text" />
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
</div>
</form>
