Angular-UI多个datepickers内幕形式控制器

Question

我正在创建一个带有多个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', function($scope, $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).
• 有没有其他方法可以解决这个问题.

感谢致敬.

Answer 1

应该阅读有关范围继承的更多信息

可以使用$ 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>