发表于: 2017-05-18 22:54:48
1 936
今天完成的事情:
把ng-model不能够绑定日历的问题解决掉。
明天计划的事情:
把日历搜索功能完成,完成任务8.
遇到的困难:
前天好不容易把时间插件给弄出来了,昨天又出现了一个问题,input框显示的日历的值不能通过ng-model进行绑定,不管怎么调试,ng-model绑定的startTime和endTime值就是为默认值。默认值为"";最重要的是js代码并没有报错。刚开始一点头绪都没有,经过反复的查找,终于找到了bug所在,原来是index页面中的js文件引入问题出现了问题,之前index页面中js文件顺序如下;
<script src="http://apps.bdimg.com/libs/angular.js/1.3.7/angular.js"></script>
<script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.7/angular-messages.min.js"></script>
<script src="ocLazyLoad.min.js"></script>
<script src="js/date/jQuery.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/loaded.js"></script>
后来才发现应该是文件引入的顺序问题,应该先引入非angular文件(含有注入ng-app的js文件除外),然后再引入js文件,这样才可以降低angular和jquery冲突的可能性
<script src="js/date/jQuery.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.7/angular.js"></script>
<script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.7/angular-messages.min.js"></script>
<script src="ocLazyLoad.min.js"></script>
<script src="js/loaded.js"></script>
这就是修改之后的js引入顺序。将jquery文件放置到angular文件之前。这样就能够使用ng-model进行双向绑定了。
收获:
从今天老大讲的mvc知识学习到很多知识。比如说写js代码的时候要实现m(model),v(view),c(controller)之间的分离。尽量少些硬代码。之前一直以为mvc就是指angular之类的框架需要使用。听了老大讲的mvc思想才知道原来js也可以用mvc思想来写。比如说我要输出一个alert警告框"请重新输入";如果是以前我肯定就会用alert("请重新输入");听了老大讲的mvc思想之后,发现这样做不具备伸展性,可以设置成json变量来引用
评论