AngularJS学习(二)

来源:互联网 发布:动易cms模板免费下载 编辑:程序博客网 时间:2024/05/16 15:09

一、XHR的使用

1、何为XHR

XHR即为:XMLHttpRequest
使用xhr进行网络访问。

var app=angular.module('app',[]);        app.controller('Controller',function($scope,$http){            $scope.hello='hello,world!';            $http.get('../source/test.json').success(function (data){                $scope.phones=data;            });        });

当然,这里的“../source/test.json”只是一个URI地址,当然可以换成网络上的一个URI资源地址。

二、基本函数的使用

1、scope.watch

用于给一个module对象注册一个改变(change)的监听事件,当module改变的时候,触发一个函数。eg:

app.controller('StartUpController',function($scope){            $scope.start={hehe:0};            jisuan=function(){                $scope.start.haha=$scope.start.hehe*10;            }            $scope.$watch('start.hehe',jisuan);        });

start.hehe发生改变的时候,就会触发jisuan这个函数,将$scope.start.haha的数值进行计算。
这里Dom元素的代码是:


<form ng-controller="StartUpController">
<input ng-model="start.hehe">
<hr />
result:{{start.haha}}
</form>

2、上面的事件的监听,同样可以使用ng-change进行实现

app.controller('StartUpController',function($scope){            $scope.start={hehe:0};            $scope.jisuan=function(){                $scope.start.haha=$scope.start.hehe*10;            }        });

DOM的代码是:

<form ng-controller="StartUpController">
<input ng-change="jisuan()" ng-model="start.hehe">
<hr />
result:{{start.haha}}
</form>

仔细看的话,会发现两种方法,一个会写成$scope.jisuan,而一个是写jisuan=...就行了,大概就是使用$scope.$watch的方法中仅仅是给一个module进行事件的监听,而因为module的改变儿触发的jisuan这个函数不是归$scope管理的,换言之:不需要在dom中进行controller;而第二种,需要进行ng-change的绑定。

0 0
原创粉丝点击