call a function from another another controller

Question

I have simple app, display file list from server- upload file- dispay updated list. I have two controllers "upload" and "files" under different div's.

I want to be able to call loadData() from files so that my file list gets updated after upload.

UPDATED DOCE
app.controller('myCtrl1', function ($scope,$http) {

$scope.fileupload=function() { $scope.loadData(); } //load file list $scope.loadData = function () { $scope.fileslist = ["abc.abc", "cde.cde"]; }

});

HTML UPDATED

 <body ng-app="myapp" nng-controller="myCtrl1"> <div> <div> <form id="upload-form" method="post" action=""> <input type="file" name="file"/> <input type="submit" value="upload" class="button" ng-click="loadData()"/> </form> </div> </div> <div> <div> <form name="myForm"> <ul> <li ng-repeat="fileslist in fileslist"> <label> <input type="radio" ng-model="$parent.name" name="name" value="{{fileslist}}" required />{{fileslist}} </label> </li> </ul> <button ng-disabled="myForm.$invalid" class="button">Submit</button>

I just want to run "loadData()" function of myCtrl1 controller when I click on button in upload controller

UPDATED problem - I did a code change and merged the controller, as service was not going help me refresh controller

So Now the problem is I can load the requred data why loadData() but it disappears in a second...

Make a service that exposes loadData, inject the service to both controllers. — Ondrej Svejdar
– Ondrej Svejdar, Commented Apr 16, 2016 at 10:16

Community · Accepted Answer · 2017-05-23 11:50:38Z

You can't call a method from a controller within a controller. You will need to extract the method out, create a service and call it. This will also decouple the code from each other and make it more testable

(function() { angular.module('app', []) .service('svc', function() { var svc = {}; svc.method = function() { alert(1); } return svc; }) .controller('ctrl', [ '$scope', 'svc', function($scope, svc) { svc.method(); } ]); })();

Example : http://plnkr.co/edit/FQnthYpxgxAiIJYa69hu?p=preview

For complete reference please click on LINK1 or LINK2

Hope this helps you.

Adding a service can get data from one controller to other but...this won't help me refresh the data on my page due to button click in another controller..(At list I am not able to find a way using service even after your example)

Babu Swami · Accepted Answer · 2016-04-16 10:30:19Z

You can use $emit and $on methods to make a communication between two controllers.

app.controller('first', ['$scope', '$rootScope', function($scope) { $rootScope.$on("CallMyMethod", function(){ $scope.mymethod(); }); $scope.mymethod = function() { // your code goes here } } ]); app.controller('second', ['$scope', '$rootScope', function($scope) { $scope.childmethod = function() { $rootScope.$emit("CallMyMethod", {}); } } ]);

You can send your data to mymethod while calling $rootScope.$emit.

XAVIER K.I · Accepted Answer · 2016-04-16 10:42:26Z

You need to inject $controller service to instantiate a controller inside another controller.

 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("TestCtrl1 - myMethod"); } }]);

Collectives™ on Stack Overflow

call a function from another another controller

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related