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, Apr 16 '16 at 10:16

score 1 · Answer 1 · edited May 23 '17 at 11:50

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) — Manojcode, Apr 16 '16 at 11:47

score 0 · Answer 2 · answered Apr 16 '16 at 10:30

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.

score 0 · Answer 3 · answered Apr 16 '16 at 10:42

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

call a function from another another controller

3 Answers3