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: stackoverflow.com/questions/14049480/… — Busata
– Busata, Commented Mar 18, 2014 at 13:44

Community · Accepted Answer · 2017-05-23 12:26:03Z

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, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 18, 2014 at 13:35

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simon Over a year ago

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

Khanh TO Over a year ago

@Simon: You should take a look as they create a better code.

T.M. Over a year ago

Take a look at this: stackoverflow.com/questions/14049480/… It will help you understand much better scopes and inheritance.

Collectives™ on Stack Overflow

nested controllers in angularjs

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related