Два контроллера, вызывающие функции друг от друга

Question

Я работаю против двух списков в SharePoint, поэтому в моем проекте у меня есть три контроллера, один главный контроллер и один для каждого списка SharePoint. Мои списки - это элементы и задачи. У одного предмета может быть несколько задач.

Когда я хочу, чтобы просмотреть элемент, в контроллере ITEMLIST я это делаю:

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

Затем, когда я хочу, чтобы загрузить задачи у меня есть это в TaskList контроллер

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

Вот проблема, когда я загружаю свой объект $ scope.loadItem(), я также хотел бы загружать связанные с этим задачи , но эта функция находится в другом контроллере (чтобы все было в порядке).

Это, как я думаю, это будет выглядеть так:

$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);}) 
}; 

Но я могу только сделать это происходит двумя способами, а именно путем перемещения мои loadTasks функции либо тот же контроллер, как loadItems или главный контроллер (потому что они оба наследуют от этого), , но это испортит мой код.

Как я могу вызвать функцию loadTasks, с моего контроллера itemList, не создавая неправильные функции в неправильных контроллерах и, таким образом, испортил мой код?

Answer 1

Я думаю, вы можете использовать $on и $broadcast. Как и следующее;

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

в контроллере taskList;

$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); 
}); 

Может быть, вы можете использовать $emit вместо $broadcast. $emit лучше, чем $broadcast сверху. Дополнительную информацию об этом можно найти на странице this answer. Как написано в этом ответе, вы должны уничтожить этого слушателя, когда ваш локальный $scope будет уничтожен.

Даже если вы хотите, вы можете использовать сервис для передачи данных.

Answer 2

Вы можете создать службу для достижения этой цели:

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

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

И затем, в контроллерах, вы должны:

// 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; 
    } 
} 

Вот plunker