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
– Adwaenyth, Commented Nov 12, 2015 at 9:42

Community · Accepted Answer · 2017-05-23 12:30:14Z

2

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.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 12, 2015 at 9:45

Ali BARIN

1,92020 silver badges23 bronze badges

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

2 Comments

sch Over a year ago

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..

Ali BARIN Over a year ago

@klskl; I updated my answer for your comment. I hope it suits for you.

Razvan B. · Accepted Answer · 2015-11-12 09:51:16Z

1

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

answered Nov 12, 2015 at 9:51

Razvan B.

6,7812 gold badges22 silver badges32 bronze badges

2 Comments

sch Over a year ago

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?

Razvan B. Over a year ago

You can store it in the service and call it when you need it

Collectives™ on Stack Overflow

Two controllers, calling functions from each other

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related