AngularJS access parent scope from child controller

Question

I ve set up my controllers using data-ng-controller  xyzController as vm   I have a scenario with parent   child nested controllers  I have no problem accessing parent properties in the nested html by using  parent vm property  but I cannot figure out how to access the parent property from within my child controller   I ve tried injecting  scope and then using  scope  parent vm property  but this isn t working   Can anyone offer advice

User · Answer

I ve just checked   scope  parent someProperty   works for me   and it will be      parent someProperty     for the view

User · Answer

You can also circumvent scope inheritance and store things in the  global  scope   If you have a main controller in your application which wraps all other controllers  you can install a  hook  to the global scope   function RootCtrl  scope         scope root    scope      Then in any child controller  you can access the  global  scope with  scope root  Anything you set here will be globally visible   Example    x000D   x000D  function RootCtrl  scope    x000D     scope root    scope  x000D    x000D   x000D  function ChildCtrl  scope    x000D     scope setValue   function     x000D       scope root someGlobalVar    someVal   x000D      x000D    x000D   x000D  function OtherChildCtrl  scope    x000D    x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app ng-controller  RootCtrl  gt  x000D     x000D     lt p ng-controller  ChildCtrl  gt  x000D       lt button ng-click  setValue    gt Set someGlobalVar lt  button gt  x000D     lt  p gt  x000D     x000D     lt p ng-controller  OtherChildCtrl  gt  x000D      someGlobalVar value    someGlobalVar   x000D     lt  p gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Perhaps this is lame but you can also just point them both at some external object   var cities        function ParentCtrl         var vm   this      vm cities   cities      vm cities 0     Oakland      function ChildCtrl  scope        var vm   this      vm cities   cities      The benefit here is that edits in ChildCtrl now propogate back to the data in the parent

User · Answer

From a child component you can access the properties and methods of the parent component with  require   Here is an example   Parent    component  myParent   mymodule MyParentComponent      controllerAs   vm       var vm   this  vm parentProperty    hello from parent     Child   require        myParentCtrl    myParent     controllerAs   vm       var vm   this  vm myParentCtrl parentProperty    hello from child

User · Answer

If your HTML is like below you could do something like this    lt div ng-controller  ParentCtrl  gt       lt div ng-controller  ChildCtrl  gt       lt  div gt   lt  div gt    Then you can access the parent scope as follows  function ParentCtrl  scope         scope cities     NY    Amsterdam    Barcelona       function ChildCtrl  scope         scope parentcities    scope  parent cities      If you want to access a parent controller from your view you have to do something like this    lt div ng-controller  xyzController as vm  gt        parent property    lt  div gt    See jsFiddle  http   jsfiddle net 2r728   Update  Actually since you defined cities in the parent controller your child controller will inherit all scope variables  So theoritically you don t have to call  parent  The above example can also be written as follows   function ParentCtrl  scope         scope cities     NY   Amsterdam   Barcelona       function ChildCtrl  scope         scope parentCities    scope cities      The AngularJS docs use this approach  here you can read more about the  scope   Another update  I think this is a better answer to the original poster    HTML   lt div ng-app ng-controller  ParentCtrl as pc  gt       lt div ng-controller  ChildCtrl as cc  gt           lt pre gt   cc parentCities   json   lt  pre gt           lt pre gt   pc cities   json   lt  pre gt       lt  div gt   lt  div gt    JS  function ParentCtrl         var vm   this      vm cities     NY    Amsterdam    Barcelona       function ChildCtrl         var vm   this      ParentCtrl apply vm  arguments      Inherit parent control      vm parentCities   vm cities      If you use the controller as method you can also access the parent scope as follows  function ChildCtrl  scope        var vm   this      vm parentCities    scope pc cities     note pc is a reference to the  ParentCtrl as pc      As you can see there are many different ways in accessing  scopes   Updated fiddle  x000D   x000D  function ParentCtrl     x000D      var vm   this  x000D      vm cities     NY    Amsterdam    Barcelona    x000D    x000D       x000D  function ChildCtrl  scope    x000D      var vm   this  x000D      ParentCtrl apply vm  arguments   x000D       x000D      vm parentCitiesByScope    scope pc cities  x000D      vm parentCities   vm cities  x000D    x000D       x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 20 angular min js  gt  lt  script gt  x000D   lt div ng-app ng-controller  ParentCtrl as pc  gt  x000D     lt div ng-controller  ChildCtrl as cc  gt  x000D       lt pre gt   cc parentCities   json   lt  pre gt  x000D       lt pre gt   cc parentCitiesByScope   json    lt  pre gt  x000D       lt pre gt   pc cities   json   lt  pre gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Super easy and works  but not sure why      angular module  testing      directive  details   function              return                 templateUrl   components details template html                 restrict   E                                  controller  function   scope                         scope details  scope details    lt     can see the parent details doing this

User · Answer

When you are using as syntax  like  ParentController as parentCtrl  to define a controller then to access parent scope variable in child controller use following    var id    scope parentCtrl id    Where parentCtrl is name of parent controller using as syntax and id is a variable defined in same controller

User · Answer

I believe I had a similar quandary recently  function parentCtrl        var pc   this     pc stands for parent control    pc foobar    SomeVal      function childCtrl  scope           now how do I get the parent control  foobar  variable        I used  scope  parent     var parentFoobarVariableValue    scope  parent pc foobar         that did it     My setup was a little different  but the same thing should probably still work

User · Answer

Some times you may need to update parent properties directly within child scope  e g  need to save a date and time of parent control after changes by a child controller  e g Code in JSFiddle  HTML   lt div ng-app gt   lt div ng-controller  Parent  gt      event date     event date    lt br  gt      event time     event time    lt br  gt       lt div ng-controller  Child  gt          event date     event date   lt br  gt          event time     event time   lt br  gt           lt br gt          event date   lt input ng-model  event date  gt  lt br gt          event time   lt input ng-model  event time  gt  lt br gt       lt  div gt   lt  div gt      JS      function Parent  scope            scope event             date   2014 01 1           time   10 01 AM                      function Child  scope

[angularjs] AngularJS access parent scope from child controller

Examples related to angularjs

Examples related to angularjs-scope