Angular-UI multiple datepickers insider form controller

angular-ui, angularjs

Solution

Should have read more about the scope inheritance

The parent scope values can be accessed using $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>

Problem

I am creating a form with multiple angular-ui datepickers and some input data. For the datepickers I have created a controller and a parent form controller like the sample given below. The form controller has the model which includes the datepicker dates. 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> ``` - Am I going the right way in having a separate controller for the datepicker. This will act as a common controller for all the date inputs - If yes, is it possible to have a generic way of binding the data in the datepicker controller back to the model dates(model.startDate,model.endDate in this case) in the parent controller. - Is there a alternative way to go about this. Thanks and regards.

Original source