背景
有读者在学习《 全栈开发之道:MongoDB+Express+AngularJS+Node.js 》 "第8章 应用实例1——用户管理" 这一章时,遇到个莫名其妙的问题,我看了读者发给我的完整工程,从代码上看,没有发现错误, 在chrome 的console 上也没有任何报错,这是什么原因呢?
一个空格引发的异常
我运行了下工程,没有异常。 凭我的直觉,以下这段代码似乎不妥, 不知你是否看出了什么端倪。
<tr>
<td> <input class="form-control",ng-model="contact.name"> </td>
<td> <input class="form-control",ng-model="contact.email"> </td>
<td> <input class="form-control",ng-model="contact.number"></td>
<td> <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
</td>
</tr>
以上代码,貌似没什么问题吧!
再看下它在 sublime 上的表现
同样是这段代码,在sublime上有三行白色的显示, 问题很有可能出在这里。
应该在 ng-model 之前,与逗号之间,添加一个空格。 代码如下:
<tr>
<td> <input class="form-control", ng-model="contact.name"> </td>
<td> <input class="form-control", ng-model="contact.email"> </td>
<td> <input class="form-control", ng-model="contact.number"></td>
<td> <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
</td>
</tr>
这样一改,在sublime上有了很大的差别,看看效果吧:
经这么一改, 再来运行下, 瞬间一切变得OK了。
小结
学习全栈开发技术,必须通过代码的敲击来实战,还得有高手指点,遇到疑问时,可以随时得到作者的帮助。这是最有效的学习方法!
参考书: 《 全栈开发之道:MongoDB+Express+AngularJS+Node.js 》
更多全栈技术,请关注微信公众号: “全栈工程师的早读课”,每天早8:00 准时推送技术文章。