原创：Angular + controllerAs + CoffeeScript的一个问题，及其解决方案

config是一个待注入的value，它的值是{count: 1}

看代码（用普通函数的写法）：

$routeProvider.when '/test',

  template: "Hello{{vm.abc()}}"

  controllerAs: "vm"

  controller: (config) ->

    @abc = –>

      return config.count

    @test = {

      api: config.count

    }

这段代码工作不正常：vm.test.api什么也没有，事实上，vm的值是{count: 1}，而我们期望的值是{test: {count: 1}}。原因何在？因为每个controller都会被new出来，而这个controller定义的代码相当于：

function SomeNameCtrl(config) {

  this.abc = function() {

    return config.count;

  this.test = {

    api: config.count;

  }

  return this.test;  // 注意这句！

}

注意最后这个return！它是coffee的一个特性：自动返回最后一个语句的结果。

有人喜欢这种语法特性，但是对我来说，特别是在这种场景下，它太讨厌了。

如何改正这个问题呢？

一个很简单的写法是手动加上一个return语句：

$routeProvider.when '/test',

  template: "Hello{{vm.abc()}}"

  controllerAs: "vm"

  controller: (config) ->

    @abc = –>

      return config.count

    @test = {

      api: config.count

    }

    return @

这种写法确实能解决问题，而且没有bug，不过……这种写法好丑啊。后来@破狼提出了一个更简单的解决办法，那就是用coffee的class语法，代码如下：

$routeProvider.when '/test',

  template: "Hello{{vm.abc()}}"

  controllerAs: "vm"

  controller: class TestCtrl

    constructor: (@config) ->

      @test = {

        api: config.root

      }

    abc: ->

      return @config.root

很漂亮的解决方案，再也不用担心忘记什么语句了！我们用Coffee类代替了以前版本的普通函数，而这，也正是new操作符所希望得到的。

在概念层面上，controller也确实应该是个类，除此之外，service也是类的概念。

所以，这个问题的本质在于我们用一个普通函数的形式定义了一个Coffee类，而这导致了第一组代码的奇怪bug。

不过，上面这段代码还有一个问题：无法被正常的minify，这个问题的解决和传统的方式很相似，代码如下：

$routeProvider.when '/test',

  template: "Hello{{vm.abc()}}"

  controllerAs: "vm"

  controller: ['config', class TestCtrl

    constructor: (@config) ->

      @test = {

        api: config.root

      }

    abc: ->

      return @config.root

 ]

巴特西

原创：Angular + controllerAs + CoffeeScript的一个问题，及其解决方案

最新文章

热门文章