发表于: 2017-05-02 21:04:09

1 1042


今天完成的事情:

1.完成任务6的收尾工作。

2.完成任务6的配置路由。

3.学习ng-model在实现双向绑定;

4.学习了angular添加事件。

明天计划的事情:

1.明天小课堂,制作小课堂ppt;

2.剩余的时间把表单验证,获取接口数据完成。

遇到的困难:

今天遇到的困难挺多的,在用ui-router实现单页面跳转的过程中,遇到很多种angular报错,下面我就一一列出。

1.,这种情况是代表html文件在读到选择器时没有读取到angular.js文件,导致出现这种错误,所以现在都是讲angular.js文件放到body之前。

2.这种报错的意思是没有从ui-sref=".articleListPage"找到路径(即路径错误),后来在李玺师兄的帮助下,发现原来自己理解错意思,将后台页当做articleListPage的母页面,它们是平级的,所以不需要在articleListPage之前加上backstage

.state('backstage.articleListPage',{//这是一个错误的案例,如果这么写的话,会出现以上的错误
url: "/articleListPage",
   templateUrl:"articleListPage.html"
})

3.在写一个demo的过程中,还出现了一种错误,这种错误是MyController不是一种函数,未识别。很有可能是ng-controller的值是一个错误的名字所造成的。

收获:

1.学会使用ui-router配置路由,主要是需要分清各个单页面之间的关系,关系弄清楚了,也就容易多了。

2.对于单项绑定和双向绑定,我觉得双向绑定和单向绑定最大的区别是双向绑定可以动态的监听数据的变化,module和view的值有一个发生变化,相应的另一个也会跟着变化,能够随时随地更改值。而单向绑定由于是单方向的,这样也有好处,能够防止数据被随时更换。

3.关于ng-model如何实现双向绑定数据,通常情况下都是在需要双向绑定数据的地方添加ng-model属性,然后用$scope.$watch(watchExp,listener,objectEquality);$scope.$watch有三个传参,它指明了要观察什么watchExp,在变化时要发生什么(listener),以及你要监视的是一个变量还是一个对象。我写了一个demo利用ng-model绑定数据,然后用$scope.$watch来实现监听数据,从而真正的实现双向绑定.demo代码如图所示

<body ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="num">
<script>
var myApp=angular.module('myApp',[]);
myApp.controller('myController',['$scope',function ($scope) {
$scope.$watch(function () {
return($scope.num);
    },function () {
console.log($scope.num);
    });
}]);
</script>
</body>

得到


返回列表 返回列表
评论

    分享到