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

时间 2019-12-09

原文原文链接

功能

数据绑定

AngularJS的双向数据绑定，一方面能够作到model变化驱动了DOM中元素变化，另外一方面也能够作到DOM元素的变化也会影响到Model。javascript

在咱们使用jQuery的时候，代码中会大量充斥相似这样的语句：html

/ 得到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操做，只要模板与数据经过声明进行了绑定，二者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。java

实例

从View到Controller再到View的数据交互：app

<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也会自动更新。url

做用域

scope

1>$scope
$scope是一个把view（一个DOM元素）连结到controller上的对象。在咱们的MVC结构里，这个 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。
通俗一点$scope 实际上就是一个JavaScript对象，controller和view均可以访问它，因此咱们能够利用它在二者间传递信息。在这个 $scope 对象里，咱们既存储数据，又存储将要运行在view上的函数。code

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

$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中（并不老是起做用）。