Question

我不确定我是否错误地考虑了我的问题，但基本上就是：我有一个笔和纸游戏网站，我用PHP构建，我正在转换为Angular。我有一组特定的页面（用于字符表，显示和编辑），然后根据URL参数，实例化几十个子类中的一个，并在它们之间调用一个公共函数。此函数根据该子类模板和逻辑显示页面。例如：

网址：/ characters / dnd4 / 5 /

当有人点击/字符/（任何）/网站查找（任何）以查看其是否为有效系统，并实例化类（任何）字符的对象时，这是一个孩子字符。字符有一个名为 displayEdit 的方法，在（任意）字符中调用该系统的正确模板。然后所有内容都被删除：所有字符（或一组字符）共有的功能由父类共享，在达到字符之前可以上升2-3层。

在PHP中，这只是让一切都触及一组普通父母的情况，但页面的基本逻辑在 Character 类中，然后是子类中的特定操作。我无法弄清楚如何在Angular中映射它。到目前为止，我一直在创建控制器来为他们的页面做逻辑;我不确定如何将逻辑拆分为其他功能。我想过让每个选项都成为一个指令，但是可以动态调用一个指令吗？我应该创建运行相同的JS类吗？他们可以携带控制器的$ scope吗？

总而言之，我只是不确定如何解决这个问题，或者我只是过分强调了这一点，我看不出明显的解决方案。

Answer 1

JavaScript中的类继承可以通过几种方式完成。与prototyical inheritance相反，使用私有变量和返回访问器方法创建闭包是一种这样的方式。在Angular中，您可以将所有类逻辑抽象为服务，然后将其传递给控制器，控制器将通过加载特定模板来创建相关视图。填充正确的信息。 Here is an example of creating a base class, a couple of sub-classes, and a sub-sub-class。我没有包含模板，因为这只是调用特定模板文件的问题（通过ng-include或指令），但总体思路就在这里。

更新：The more succinct, ES6 version of the code

// Module
angular.module('app', [])

// Service 
function characterService () {
  return {
    character: function (spec) { // base class
      var type = spec.type || 'untyped'
      var name = spec.name || 'unnamed'
      var stats = {
        health: 10,
        mana: 10
      }
      return {
        getType: function () {
          return type
        },
        getName: function () {
          return name
        },
        getStats: function () {
          return stats
        },
        setStats: function (newStats) {
          stats = newStats
        }
      }
    },
    // sub class of character
    elf: function (spec) { 
      spec.type = spec.type || 'Elf'
      var elf = this.character(spec)
      var stats = elf.getStats()
      stats.health += 10
      elf.setStats(stats)
      elf.attack = function () {
        return 'You have shot an arrow!'
      }
      return elf
    },
    // sub class of character
    mage (spec) {
      spec.type = spec.type || 'Mage'
      var mage = this.character(spec)
      var stats = mage.getStats()
      stats.mana += 10
      mage.setStats(stats)
      mage.attack = function () {
        return 'Woah! Magic missile!!'
      }
      return mage
    },
    // sub class of mage
    warlock (spec) {
      spec.type = 'Warlock'
      var warlock = this.mage(spec)
      var stats = warlock.getStats()
      stats.mana += 10
      warlock.setStats(stats)
      warlock.attack = function () {
        return 'Cthulhu is summoned!'
      }
      return warlock
    }
  }
}

//Register Service
angular.module('app').factory('characterService', characterService)

// Main Controller
function main ($scope, characterService) {
  $scope.player1 = characterService.elf({name:'Erik'})
  $scope.player2 = characterService.mage({name:'Aayla'})
  $scope.player3 = characterService.warlock({name:'Zenthyr'})
}

// Register controller
angular.module('app').controller('main', main)

创建子控制器

1 个答案: