功能

数据绑定

AngularJS的双向数据绑定,一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model。

在我们使用jQuery的时候,代码中会大量充斥类似这样的语句:

/获得TEXT.AREATEXT的值/
var textval = $("#text_id").attr("value");
//或者
var textval = $("#text_id").val();
/获取单选按钮的值/
var valradio = $("input@type=radio").val();
/获取一组名为(items)的radio被选中项的值/
var item = $('input@name=items').val();
/获取复选框的值/
var checkboxval = $("#checkbox_id").attr("value");
/获取下拉列表的值/
var selectval = $('#select_id').val();
//文本框,文本区域:
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
//多选框checkbox:
$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);//勾选
if($("#chk_id").attr('checked')==true) //判断是否已经选中
//单选组radio:
$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
//下拉框select:
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty();//清空下拉框
获取一组名为(items)的radio被选中项的值
var item = $('input@name=items').val();//若未被选中 则val() = undefined
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

即频繁的DOM操作(读取和写入),其实我们的最终目的并不是要操作DOM,而是要实现业务逻辑。angular的数据绑定将让你摆脱DOM操作,只要模板与数据通过声明进行了绑定,两者将随时保持同步,最新的数据会实时显示在页面中,页面中用户修改的数据也会实时被记录在数据模型中。

实例

从View到Controller再到View的数据交互:

<html ng-app="demoApp">

……

<input type="text" ng-model="user.name" placeholder="请输入名称"/>
Hello, {{ user.name }}!

……
关键: ng-app 、 ng-model 和 { {user.name } }
首先: <html>元素的ng-app属性。标识这个DOM里面的内容将启用AngularJS应用。
其次:告诉AngularJS,对页面上的“user.name” 这个Model进行双向数据绑定。
第三:告诉AngularJS,在“{{ user.name}}”这个指令模版上显示“user.name”这个Model的数据。

从Server到Controller再到View的数据交互:

<html ng-app="demoApp">

……

<div  ng-controller="demoController">
<input type="text" ng-model="user.name" disabled="disabled"/>
<a href="javascript:void(0);" target="_blank" rel="nofollow">获取名字  </a>

……

demoApp.controller("demoController", function($http, $scope){
$scope. getAjaxUser = function(){
$http.get({url:"../xxx.action"}).success(function(data){
$scope.user= data;
 });
$scope.user = {"name":"从JOSN中获取的名称","age":22};
};
});

改变$scope中的user,View也会自动更新。

作用域

scope

1>$scope
$scope是一个把view(一个DOM元素)连结到controller上的对象。在我们的MVC结构里,这个 $scope 将成为model,它提供一个绑定到DOM元素(以及其子元素)上的excecution context。
通俗一点$scope 实际上就是一个JavaScript对象,controller和view都可以访问它,所以我们可以利用它在两者间传递信息。在这个 $scope 对象里,我们既存储数据,又存储将要运行在view上的函数。

$scope是一个将view(一个DOM元素)连结到controller上的对象。每一个Angular应用都会有一个 $rootScope。这个 $rootScope 是最顶级的scope,它对应着含有 ng-app 指令属性的那个DOM元素。

$scope也是一个JavaScript对象,指向应用程序作用域内的所有HTML元素和执行上下文。

所有$scope都遵循原型继承,这意味着它们都能访问父$scope,也具有原型链那样的特性,即向上访问属性和方法,直到最顶层。

在ng-repeat、ng-switch、ng-view、ng-include都会创建一个新的子scope,所以问题经常在这些指令中出现。

在你的model中,带有「.」将会确认原型继承在起作用。所以使用

<input type="text" ng-model="someObj.prop1">


<input type="text" ng-model="prop1">

更好。

如果你真的想要(或需要)使用一个原始的方式,有两项工作:
在子scope中,使用$parent.parentScopeProperty。这将阻止子scope创建它自己的属性。
在父scope上创建一个方法,并且从子scope中调用它,传递原始值到父scope中(并不总是起作用)。

叶为花而生
164 声望5 粉丝

一个在前端道路上愈走愈远的花花