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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。