Угловая игра JS - Создание и уничтожение субконтроллеров с помощью методов

Question

Я создаю игру на основе AngularJS и HTML5, которая состоит из пользователей, которые находят и нажимают на птиц. Я хочу, чтобы птицы появлялись в случайных местах на экране. Если вы нажмете птицу - или если вы подождете более 5 секунд - птица автоматически исчезнет.

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

1. Создание контроллера, который отвечает за управление игру сессий (ограничение по времени, трудности и т.д.)

2. Использование этого контроллера для создания объектов птиц (субконтроллеры?) При обычном интервалах.

3. Ввод логики в каждый объект Bird таким образом , что они автоматически уничтожают себя через 5 секунд или если нажимают на них.

Вот главный контроллер, который создан для части 1 моей проблемы:

myGameModule.controller('BirdActivityCtrl', function BirdActivityCtrl($scope) { 

    $scope.difficulty = 'Easy'; 
    $scope.reward = 250; 

    $scope.spawn_interval = 1000; 
    $scope.status = 'starting'; 

    $scope.birds_required = 30; 
    $scope.birds_clicked = 0; 
    $scope.time_left = 60; 

    $scope.start = function(){ 
    location = '#/birds_in_progress'; 
    $scope.status = 'in_progress'; 
    } 
     $scope.cancel = function(){ 
    location = '#/cafeteria'; 
    } 
}); 

В частности, я прошу помощи с частями 2 и 3 моего вопроса (упомянутых выше). Я знаю, что у Angular есть строгие соглашения о разделении элементов DOM от контроллеров. Каков правильный способ создания объектов птиц (которые будут привязаны к DIV на странице) и уничтожить их через 5 секунд? Спасибо за чтение. Любая помощь будет оценена!

Answer 1

Ваши работы, связанные с DOM, должны быть в directives. Любая директива может иметь собственный контроллер, это будет ваш BirdController. Для любого нового экземпляра птицы (div с директивой) будет создан новый контроллер и область действия.

Предлагаю вам поместить все ваши птицы в какую-то структуру данных в service, доступную из любой части вашего приложения с помощью DI. Тогда вы можете просто использовать ng-repeat для птиц!

Что-то вроде этого псевдокода должно работать:

game.factory('BirdStorage', ['in', 'ject', 'ables', function(){ 
    var birds = []; 

    return { 
     addBird : function(){ 
      birds.push({...}) 
     }, 
     deleteBird : function(id){ 
      ... 
     }, 
     ... 
    } 
}]); 

game.directive('bird', ['in', 'ject', 'ables', function(){ 
    return { 
     restrict: 'EA', 
     template: '<div>...</div>', 
     replace: true, 
     scope: { 
      ... 
     } 
     controller: function($scope, $element, $attrs){ 
      ... 
     } 
     link: function(){ 
      ... 
     } 
    } 
}]); 

Затем вы можете использовать его в HTML, как элемент:

<ul> 
    <li data-ng-repeat="bird in birds"> 
     <bird attrs=...> 
    </li> 
</ul> 

birds будет поступать из сервиса вы определили ранее.

И логика удаления птицы придет к BirdStorage. Просто создайте тайм-аут, который удалит указанную птицу:

setTimeout(function(){ 
    this.deleteBird(id); 
}, 5000)