How do I inject a controller into another controller in AngularJS

Question

I m new to Angular and trying to figure out how to do things     Using AngularJS  how can I inject a controller to be used within another controller   I have the following snippet   var app   angular module  testApp           app controller  TestCtrl1      scope   function   scope         scope myMethod   function              console log  TestCtrl1 - myMethod                app controller  TestCtrl2      scope    TestCtrl1   function   scope  TestCtrl1        TestCtrl1 myMethod           When I execute this  I get the error    Error    injector unpr  Unknown provider  TestCtrl1Provider  lt - TestCtrl1 http   errors angularjs org 1 2 21  injector unpr p0 TestCtrl1Provider 20 3C- 20TestCtrl1   Should I even be trying to use a controller inside of another controller  or should I make this a service

User · Answer

you can also use  rootScope to call a function method of 1st controller from second controller like this    controller  ctrl1   function  rootScope   scope          rootScope methodOf2ndCtrl           Your code here        controller  ctrl2   function  rootScope   scope          rootScope methodOf2ndCtrl   function            Your code here

User · Answer

lt div ng-controller  TestCtrl1  gt       lt div ng-controller  TestCtrl2  gt         lt  -- your code-- gt        lt  div gt    lt  div gt    This works best in my case  where TestCtrl2 has it s own directives   var testCtrl2    controller  TestCtrl2     This gives me an error saying scopeProvider injection error      var testCtrl1ViewModel    scope  new        controller  TestCtrl1    scope   testCtrl1ViewModel        testCtrl1ViewModel myMethod       This doesn t really work if you have directives in  TestCtrl1   that directive actually have a different scope from this one created here  You end up with two instances of  TestCtrl1

User · Answer

use typescript for your coding  because it s object oriented  strictly typed and easy to maintain the code      for more info about typescipt click here  Here one simple example I have created to share data between two controller using Typescript     module Demo     create only one module for single Applicaiton angular module  app          Create a searvie to share the data export class CommonService       sharedData  any      constructor             this sharedData    send this data to Controller             add Service to module app angular module  app   service  CommonService   CommonService      Create One controller for one purpose export class FirstController       dataInCtrl1  any        Don t forget to inject service to access data from service     static  inject     CommonService       constructor private commonService  CommonService          public getDataFromService             this dataInCtrl1   this commonService sharedData            add controller to module app angular module  app   controller  FirstController   FirstController   export class SecondController       dataInCtrl2  any      static  inject     CommonService       constructor private commonService  CommonService          public getDataFromService             this dataInCtrl2   this commonService sharedData          angular module  app   controller  SecondController   SecondController

User · Answer

If your intention is to get hold of already instantiated controller of another component and that if you are following component directive based approach you can always require a controller  instance of a component  from a another component that follows a certain hierarchy  For example    some container component that provides a wizard and transcludes the page components displayed in a wizard myModule component  wizardContainer              controller   function WizardController         this disableNext   function              disable next step    some implementation to disable the next button hosted by the wizard                         some child component myModule component  onboardingStep            controller   function OnboadingStepController         this  onInit   function                  you can access this container disableNext   function            this onChange   function val              say some value has been changed and it is not valid i do not want wizard to enable next button so i call container s disable method i e       if notIsValid val            this container disableNext                             require         container     wizardContainer    Require a wizard component s controller which exist in its parent hierarchy                Now the usage of these above components might be something like this   lt wizard-container      gt   lt  --some stuff-- gt       lt  -- some where there is this page that displays initial step via child component -- gt    lt on-boarding-step     gt    lt  --- some stuff-- gt   lt  on-boarding-step gt       lt  --some stuff-- gt   lt  wizard-container gt   There are many ways you can set up require    no prefix  - Locate the required controller on the current element  Throw an error if not found    - Attempt to locate the required controller or pass null to the link fn if not found    - Locate the required controller by searching the element and its parents  Throw an error if not found     - Locate the required controller by searching the element s parents  Throw an error if not found     - Attempt to locate the required controller by searching the element and its parents or pass null to the link fn if not found      - Attempt to locate the required controller by searching the element s parents  or pass null to the link fn if not found     Old Answer  You need to inject  controller service to instantiate a controller inside another controller  But be aware that this might lead to some design issues  You could always create reusable services that follows Single Responsibility and inject them in the controllers as you need  Example  app controller  TestCtrl2      scope     controller   function   scope   controller       var testCtrl1ViewModel    scope  new      You need to supply a scope while instantiating       Provide the scope  you can also do  scope  new true  in order to create an isolated scope       In this case it is the child scope of this scope      controller  TestCtrl1    scope   testCtrl1ViewModel        testCtrl1ViewModel myMethod      And call the method on the newScope        In any case you cannot call TestCtrl1 myMethod   because you have attached the method on the  scope and not on the controller instance  If you are sharing the controller  then it would always be better to do -  controller  TestCtrl1      log   function   log        this myMethod   function               log debug  quot TestCtrl1 - myMethod quot                and while consuming do   controller  TestCtrl2      scope     controller   function   scope   controller         var testCtrl1ViewModel    controller  TestCtrl1         testCtrl1ViewModel myMethod          In the first case really the  scope is your view model  and in the second case it the controller instance itself

User · Answer

There is no need to import Inject your controller in JS  You can just inject your controller nested controller through your HTML It s worked for me  Like      lt div ng-controller  TestCtrl1  gt       lt div ng-controller  TestCtrl2  gt         lt  -- your code-- gt        lt  div gt    lt  div gt

User · Answer

The best solution - angular module  quot myapp quot   controller  quot frstCtrl quot  function  scope        scope name  quot Atul Singh quot       controller  quot secondCtrl quot  function  scope        angular extend this   controller  frstCtrl     scope  scope          console log  scope          Here you got the first controller call without executing it

User · Answer

I d suggest the question you should be asking is how to inject services into controllers  Fat services with skinny controllers is a good rule of thumb  aka just use controllers to glue your service factory  with the business logic  into your views    Controllers get garbage collected on route changes  so for example  if you use controllers to hold business logic that renders a value  your going to lose state on two pages if the app user clicks the browser back button   var app   angular module  testApp           app factory  methodFactory   function          return   myMethod  function                  console log  methodFactory - myMethod               app controller  TestCtrl1      scope    methodFactory   function   scope methodFactory       Comma was missing here Now it is corrected       scope mymethod1   methodFactory myMethod          app controller  TestCtrl2      scope    methodFactory   function   scope  methodFactory         scope mymethod2   methodFactory myMethod           Here is a working demo of factory injected into two controllers  Also  I d suggest having a read of this tutorial on services factories

[angularjs] How do I inject a controller into another controller in AngularJS

Examples related to angularjs

Examples related to angularjs-scope

Examples related to angularjs-controller