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
]