nested controllers in angularjs

Question

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

As an addition to Khanh TO's answer, check out this excellent thread that explains javascript & angular's inheritance: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482 — Busata, Mar 18 '14 at 13:44

score 5 · Accepted Answer · edited May 23 '17 at 12:26

5

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)

edited May 23 '17 at 12:26

Community

1
1

answered Mar 18 '14 at 13:35

Khanh TO

48,509
13
99
115

works brilliant, will take a look at the other approaches that you suggested, how ever, not reached any of those methods yet in my training book – Simon Mar 18 '14 at 13:43
@Simon: You should take a look as they create a better code. – Khanh TO Mar 18 '14 at 13:44
Take a look at this: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs It will help you understand much better scopes and inheritance. – T.M. Mar 18 '14 at 13:49

nested controllers in angularjs

1 Answers1