原创: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的一个问题,及其解决方案的更多相关文章
- Angular学习笔记—创建一个angular项目
开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angul ...
- 【原创】经验分享:一个小小emoji尽然牵扯出来这么多东西?
前言 之前也分享过很多工作中踩坑的经验: 一个线上问题的思考:Eureka注册中心集群如何实现客户端请求负载及故障转移? [原创]经验分享:一个Content-Length引发的血案(almost.. ...
- 如何在嵌入式Linux上开发一个语音通信解决方案
开发一个语音通信解决方案是一个软件项目.既然是软件项目,就要有相应的计划:有多少功能,安排多少软件工程师去做,这些工程师在这一领域的经验如何,是否需要培训,要多长时间做完,中间有几个主要的milest ...
- 使用angular.js开发的一个简易todo demo
前沿 在CVTE实习考察的一周里,接触到了angular,并在最后的一天任务里要求使用angular做一个功能主要包括创建.编辑.恢复.删除以及留言的todo demo,并支持响应式布局.因为之前没怎 ...
- 关于angular双向绑定的一个问题,百度无果,还请帮忙解惑。
用了一段时间anjular蛮好用的.其实用的功能不多.主要用于列表数据绑定以及一些简单效果的绑定,但是最近出现一个现象,百度无果,居然没有人遇到.现在描述一下,截图不方便,希望有人解惑. 列表ng-r ...
- 【原创】最近写的一个比较hack的小爬虫
目标:爬取爱漫画上面自己喜欢的一个漫画 分析阶段: 0.打开爱漫画主页,迎面就是一坨js代码..直接晕了 1.经过抓包和对html源码的分析,可以发现爱漫画通过另外一个域名发送图片,而当前域名中通过j ...
- 【原创】自己动手写一个能操作redis的客户端
引言 redis大家在项目中经常会使用到.官网也提供了多语言的客户端供大家操作redis,如下图所示 但是,大家有思考过,这些语言操作redis背后的原理么?其实,某些大神会说 只要按照redis的协 ...
- Angular内提供了一个可以快速建立测试用web服务的方法:内存 (in-memory) 服务器
如何使用 Angular 内存 (in-memory) 服务器https://segmentfault.com/a/1190000009898540
- 【原创】经验分享:一个Content-Length引发的血案(almost....)
前言 上周在工作中遇到一个问题,挺有意思,这里记录一下.上周在工作中遇到一个问题,挺有意思,这里记录一下.标题起的很唬人,这个问题差点引发血案,花哥还是很严谨的一个人,后面备注了almost.... ...
随机推荐
- (转)RTP-H264封包分析
rtp(H264)第一个包(单一NAL单元模式)————-sps 80 {V=10,p=0,x=0,cc=0000} 60 {m=0,pt=110 0000} 53 70{sequence numbe ...
- List集合的ForEach扩展
public static void ForEach<T>(this IEnumerable<T> enumerableSource, Action<T&g ...
- Android 6.0 Kotlin 蓝牙扫描
package com.arci.myapplication import android.app.Activityimport android.os.Bundleimport android.sup ...
- linux例行性工作调度学习(一)
Linux系统中有一种例行性工作(crontab)可以调度,是通过crontab和at来实现的. 这两种工作调度: 一种是例行性的,就是每隔一定的周期要来办的事项. 一种是突发性的,就是这次做完以后就 ...
- Hbase 布隆过滤器BloomFilter介绍
转载自:http://blog.csdn.net/opensure/article/details/46453681 1.主要功能 提高随机读的性能 2.存储开销 bloom filter的数据存在S ...
- MapReduce:实现文档倒序排序,且字符串拼接+年+月+日
写出MapReduce程序完成以下功能. input1: -- a -- b -- c -- d -- a -- b -- c -- c input2: -- b -- a -- b -- d -- ...
- 深入解析Linux内核及其相关架构的依赖关系
Linux kernel 成功的两个原因: 灵活的架构设计使得大量的志愿开发者能够很容易加入到开发过程中:每个子系统(尤其是那些需要改进的)都具备良好的可扩展性.正是这两个原因使得Linux kern ...
- IDEA 编译时 未结束的字符串文字
这个问题就是编码的问题,修改文件的编码可以解决 1. IDEA中 file-->Settings 找到File Encodings,将IDE Encoding.Project Encodin ...
- Spring Boot 中全局异常处理器
Spring Boot 中全局异常处理器,就是把错误异常统一处理的方法.等价于Springmvc中的异常处理器. 步骤一:基于前面的springBoot入门小demo修改 步骤二:修改HelloCon ...
- Text Justification,文本对齐
问题描述:把一个集合的单词按照每行L个字符放,每行要两端对齐,如果空格不能均匀分布在所有间隔中,那么左边的空格要多于右边的空格,最后一行靠左对齐. words: ["This", ...