CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Simon
Simon

Reputation: 1476

nested controllers in angularjs

we're pretty new to this. After finally managing to get ui-Bootstrap working with a date control :-

<div class="col-md-2 box" ng-controller="ResultFilter" >  
<h2>Filter</h2>

    <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
   <p class="input-group" ng-controller="DatepickerDemoCtrl">
        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
    </p>
 <p class="input-group">
    <select class="form-control" ng-model="resultfilter.frequency">
  <option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
      </p>
</div>

We are capturing the click with the following angular

CISApp.controller('ResultFilter', function ResultFilter($scope, $http) {
$scope.updateResults = function () {

 };
});

how ever, how do we get at value of start date as it is within the controller of DatePickerDemoCtrl? The following doesnt work?

$scope.resultfilter.startdate

any help would be appreciated

Upvotes: 1

Views: 876

Answers (1)

Khanh TO
Khanh TO

Reputation: 48972

ng-controller creates new scope. Both of your DatepickerDemoCtrl are child scopes of ResultFilter. In your case, You could try:

$scope.$$childHead.resultfilter.startdate

This solution is not recommended IMO as it creates tightly coupled code, you're assuming that there is a child scope for this controller, some more recommended approaches:

  • Use $on, $emit, $broadcast to communicate between scopes.
  • Create a shared service to hold the state (I think does not apply in your case)

Upvotes: 5

Related Questions