0

My question is how can i inject a controller in an other?

this is my first controller:

define([ 'module', '{angular}/angular' ], function(module, angular) {
'use strict';

var listAnimcom = angular.module('listAnimcom', []);

listAnimcom.controller('listAnimcomCtrl', [ '$scope', 
        function($scope) {
        $scope.testAnimcom="this controller is called";           
        } ]);

return {
         angularModules : [ 'listAnimcom' ]
       };
});

this is my second controller where i wante to inject the first:

define([ 'module', '{angular}/angular',
     '{animcom}/modules/controllers/listAnimcom',
      ], function(module, angular) {
'use strict';

var plateformeDeTest = angular.module('plateformeDeTest', ['listAnimcom']);

plateformeDeTest.controller('plateformeDeTestCtrl', [ '$scope','listAnimcomCtrl',
        function($scope,listAnimcomCtrl) {
   $scope.typeActivite="polcom";
   $scope.typeClient="plateforme";

        } ]);

return {
        angularModules : [ 'plateformeDeTest' ]
       };
});

but it gives me this error:

 angular.js:12798 Error: [$injector:unpr] http://errors.angularjs.org/1.4.12/$injector/unpr?p0=listAnimcomCtrlProvider%20%3C-%20listAnimcomCtr... 
  at angular.js:38 

Any idea pls !!!

2
  • Possible duplicate of What's the correct way to communicate between controllers in AngularJS? Commented Feb 10, 2017 at 10:33
  • There is a lot of questions regarding controller to controller communicatino on StackOverflow, please use the search (google will mostly find them too) before asking Commented Feb 10, 2017 at 10:34

1 Answer 1

1

You cannot inject one controller to another controller.

In order to share the data among the controllers, consider using factory/service.

Better to go through this answer to understand better on sharing data among controllers.

Example using factory,

var app = angular.module("clientApp", [])
 app.controller("TestCtrl", 
   function($scope,names) {
     $scope.names =[];
    $scope.save= function(){
      names.add($scope.name);
    } 
    
  });
 app.controller("TestCtrl2", 
   function($scope,names) {
    $scope.getnames = function(){
     $scope.names = names.get();
   }
});
   
app.factory('names', function(){
  var names = {};
  names.list = [];
  names.add = function(message){
    names.list.push({message});
  };  
  names.get = function(){
    return names.list;
  };
  return names;
});
<!doctype html>
<html >

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="clientApp">
  <div ng-controller="TestCtrl">
    <input type="text" ng-model="name">
    <button ng-click="save()" > save</button>
    
  </div>
  
  <div ng-init="getnames()" ng-controller="TestCtrl2">
     <div  ng-repeat="name in names">
       {{name}}
       </div>
     
  </div>
</body>

</html>

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

4 Comments

please did you have a concrete example??
@elogriamine check the demo, it shows how to share data among two controllers using factory
Thank you, it solves the problem concerning the example that I posted, but indeed in my case in which I work there is a whole business logic that is in the first controller (variable, function ..) that I want to reuse also In the second, you can say in the form of factorin, I do not see how to reuse these elements in the second controller using the services
@elogriamine Probably you can do bit of research, upvote if the answer has helped

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.