Two controllers, calling functions from each other

Question

I am working against two lists in SharePoint, so in my project I have three controllers, one main controller, and one for each SharePoint list. My lists are items, and tasks. One item can have several tasks.

When I want to view an item, in the itemList controller I do this:

$scope.loadItem = function(id){
    var promise = ItemService.getItem(id);
    promise.then(function(item){
        $scope.viewItem(item);
    }, function(err){console.log(err);})
};

Then, when I want to load tasks I have this in the taskList controller

$scope.loadTasks = function(parentId){
    var promise = TaskService.getTasks(parentId);
    promise.then(function(result){
        console.log(result);
    }, function(err){console.log(err);})
};

Here's the problem, when I load my item $scope.loadItem(), I would also want to load tasks related to that item, but that function is in the other controller (to keep things clean).

This is how I'm thinking it would look like:

 $scope.loadItem = function(id){
    var promise = ItemService.getItem(id);
    promise.then(function(item){
        $scope.loadTasks(item.Id);
        $scope.viewItem(item);
    }, function(err){console.log(err);})
};

But I can only make this happen in two ways, and that is by moving my loadTasks function to either the same controller as loadItems function, or to the main controller (cause they both inherit from that), but that would mess up my code.

How can I call the loadTasks function, from my itemList controller, without creating the wrong functions in the wrong controllers, and thus messing up my code?

Maybe create a service that handles the requests and that all controllers access? — Adwaenyth, Nov 12 '15 at 09:42

score 2 · Accepted Answer · edited May 23 '17 at 12:30

I think you can use $on and $broadcast. Like the following;

in itemList controller;

$scope.loadItem = function (id) {
    var promise = ItemService.getItem(id);

    promise.then((function (item) {
        $scope.viewItem(item);

        $rootScope.$broadcast('loadTasks', item.id);
    }, function (err) { console.log(err); });
};

in the taskList controller;

$scope.loadTasks = function (parentId) {
    var promise = TaskService.getTasks(parentId);

    promise.then(function (result) {
        console.log(result);
    }, function (err) {console.log(err);})
};

$rootScope.$on('loadTasks', function (event, id) {
    $scope.loadTasks(id);
});

Maybe you can use $emit instead of $broadcast. $emit is better than $broadcast on performance. You can find more information about that on this answer. As written in that answer, you should destroy that listener when your local $scope gets destroyed.

Even if you want, you can use a service for passing data.

So this way, when I call the loadItem function, it would broadcast the Id, and run the loadTasks function? This seems good, are there any disadvantages to $on and $broadcast? I haven't seen much of them before.. — sch, Nov 12 '15 at 09:56
@klskl; I updated my answer for your comment. I hope it suits for you. — Ali BARIN, Nov 12 '15 at 10:08

score 1 · Answer 2 · answered Nov 12 '15 at 09:51

You can create a service to achieve this:

angular
  .module('myApp', [])
  .factory('shareService', shareService)

  function shareService() {
    var memory = {};
    return {
        store: function (key, value) {
            memory[key] = value;
        },
        get: function (key) {
            return memory[key];
        }
    };  
  }

And then, in your controllers, you have to:

// Controller 1
function FirstCtrl ($scope, shareService) {
  shareService.store('FirstCtrl', $scope)
  $scope.variableOne = 'First Controller Variable';
}

// Controller 2 (calling func from Controller 1)
function SecondCtrl ($scope, shareService) {
  $scope.getOne = function() {
    $scope.resOne = shareService.get('FirstCtrl').variableOne;
  }
}

Here is a plunker

I understand what you're trying to explain, but how would my second function run when the first one runs? Would my loadTasks function be inside that service? Or would the service call it? — sch, Nov 12 '15 at 09:57
You can store it in the service and call it when you need it — Razvan B., Nov 12 '15 at 10:00

Two controllers, calling functions from each other

2 Answers2