AngularJs 功能（三）--数据绑定丶作用域

发布时间：2020-12-17 08:28:20 所属栏目：安全来源：网络整理

导读：功能数据绑定 AngularJS的双向数据绑定，一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。在我们使用jQuery的时候，代码中会大量充斥类似这样的语句： / 获得TEXT.AREATEXT的值 / var textval = $("#text_i

功能

数据绑定

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中（并不总是起作用）。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!