原创: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.... ...
随机推荐
- 【网络编程基础】Linux下进程通信方式(共享内存,管道,消息队列,Socket)
在网络课程中,有讲到Socket编程,对于tcp讲解的环节,为了加深理解,自己写了Linux下进程Socket通信,在学习的过程中,又接触到了其它的几种方式.记录一下. 管道通信(匿名,有名) 管道通 ...
- python全栈开发从入门到放弃之网络基础
一.操作系统基础 操作系统:(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才 ...
- LifecycleProcessor not initialized - call 'refresh' before invoking lifecycle methods via the context: --异常记录
升级了JDK之后,启动应用,直接抛出此异常.网上搜罗半天,没有正确的解决方案. 然后想到了是“升级了JDK”,重新检查所有JDK相关的配置的地方,在Debug Configurations里找到启动时 ...
- 第四课 Makefile文件的制作(下)
1序言: 前面一节课讲解了Makefile的基础知识包括原理.预定义以及命令格式,这样是可以完成一个自动编译的文件,这些知识可以帮你完成.想想mak真是强大啊,可能有些同志发现了如果项目文件太多每个目 ...
- kubeadm方式安装kubernetes
系统: Ubuntu 18.04.2 LTS 内存: 8G 机器: 属性 IP Hostname ssh Master 192.168.91.48 blackray-pc node1 1 ...
- shell文件安全与权限 笔记
主要学习: 文件盒目录的权限 Setuid Chown和chgrp Umask 连接符号 一个文件已经创建,就具有三种访问方式 读,可以显示该文件的内容 写,可以编辑或删除它 执行,如果该文件时一个s ...
- c++中指针作为函数参数的详细理解
在C语言中,函数的参数不仅可以是整数.小数.字符等具体的数据,还可以是指向它们的指针.用指针变量作函数参数可以将函数外部的地址传递到函数内部,使得在函数内部可以操作函数外部的数据,并且这些数据不会随着 ...
- Android 电池关机充电
android 电池(一):锂电池基本原理篇 android 电池(二):android关机充电流程.充电画面显示 android 电池(三):android电池系统 android电池(四):电池 ...
- 利用C#查看特定服务是否安装
需求:想通过C#代码来查看IIS服务或者MSMQ是否已经安装 分析:IIS服务和MSMQ安装完成后都会创建windows服务,所以我们只需要查看对应的服务是否存在即可. 准备工作: IIS服务名称:W ...
- MySQL-5.7 创建及查看触发器
触发器的作用是当表上有对应SQL语句发生时,则触发执行. 1.语法 CREATE [DEFINER = { user | CURRENT_USER }] TRIGGER trigger_name tr ...