javascript - Angular JS 游戏 - 使用方法创建和销毁子 Controller

Question

我正在创建一个基于 AngularJS 和 HTML5 的游戏，该游戏由用户寻找和点击鸟类组成。我想让鸟出现在屏幕上的随机位置。如果你点击一只鸟——或者如果你等待超过 5 秒——那只鸟会自动消失。

我是 Angular 的新手，但我想我会通过...来解决这个问题

1. 创建一个负责管理游戏的 Controller session (时间限制、难度等)

2. 使用那个 Controller 定期创建 Bird 对象(子 Controller ？) 间隔。

3. 将逻辑放入每个 Bird 对象中 他们会在 5 秒后或如果 他们被点击了。

这是为我的问题的第 1 部分创建的主 Controller :

 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 元素与 Controller 分开。生成鸟类对象(将绑定(bind)到页面上的 DIV)并在 5 秒后销毁它们的正确方法是什么？感谢您阅读。任何帮助将不胜感激!

Answer 1

你的 DOM 相关工作应该在 directives 中.任何指令都可以有自己的 Controller ，它将是您的 BirdController。对于任何新的鸟实例(div with directive)，将创建新的 Controller 和作用域。

我建议你把所有的鸟都放在一个 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 将来自您之前定义的服务。

移除 bird 的逻辑将进入 BirdStorage。只需创建一个将删除指定鸟的超时:

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