資訊專(zhuān)欄INFORMATION COLUMN
摘要：功能數(shù)據(jù)綁定的雙向數(shù)據(jù)綁定，一方面可以做到變化驅(qū)動(dòng)了中元素變化，另一方面也可以做到元素的變化也會(huì)影響到。其次告訴，對(duì)頁(yè)面上的這個(gè)進(jìn)行雙向數(shù)據(jù)綁定。第三告訴，在這個(gè)指令模版上顯示這個(gè)的數(shù)據(jù)。作用域是一個(gè)把一個(gè)元素連結(jié)到上的對(duì)象。
功能 數(shù)據(jù)綁定
AngularJS的雙向數(shù)據(jù)綁定，一方面可以做到model變化驅(qū)動(dòng)了DOM中元素變化，另一方面也可以做到DOM元素的變化也會(huì)影響到Model。
在我們使用jQuery的時(shí)候，代碼中會(huì)大量充斥類(lèi)似這樣的語(yǔ)句：
/獲得TEXT.AREATEXT的值/
var textval = $("#text_id").attr("value");
//或者
var textval = $("#text_id").val();
/獲取單選按鈕的值/
var valradio = $("input@type=radio").val();
/獲取一組名為(items)的radio被選中項(xiàng)的值/
var item = $("input@name=items").val();
/獲取復(fù)選框的值/
var checkboxval = $("#checkbox_id").attr("value")；
/獲取下拉列表的值/
var selectval = $("#select_id").val();
//文本框，文本區(qū)域：
$("#text_id").attr("value","");//清空內(nèi)容
$("#text_id").attr("value","test");//填充內(nèi)容
//多選框checkbox：
$("#chk_id").attr("checked","");//使其未勾選
$("#chk_id").attr("checked",true);//勾選
if($("#chk_id").attr("checked")==true) //判斷是否已經(jīng)選中
//單選組radio：
$("input[@type=radio]").attr("checked","2");//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
//下拉框select：
$("#select_id").attr("value","test");//設(shè)置value=test的項(xiàng)目為當(dāng)前選中項(xiàng)
$("").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty()；//清空下拉框
獲取一組名為(items)的radio被選中項(xiàng)的值
var item = $("input@name=items").val();//若未被選中 則val() = undefined
獲取select被選中項(xiàng)的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個(gè)元素為當(dāng)前選中值
$("#select_id")[0].selectedIndex = 1;
radio單選組的第二個(gè)元素為當(dāng)前選中值
$("input[@name=items]").get(1).checked = true;
即頻繁的DOM操作（讀取和寫(xiě)入），其實(shí)我們的最終目的并不是要操作DOM，而是要實(shí)現(xiàn)業(yè)務(wù)邏輯。angular的數(shù)據(jù)綁定將讓你擺脫DOM操作，只要模板與數(shù)據(jù)通過(guò)聲明進(jìn)行了綁定，兩者將隨時(shí)保持同步，最新的數(shù)據(jù)會(huì)實(shí)時(shí)顯示在頁(yè)面中，頁(yè)面中用戶(hù)修改的數(shù)據(jù)也會(huì)實(shí)時(shí)被記錄在數(shù)據(jù)模型中。
實(shí)例從View到Controller再到View的數(shù)據(jù)交互：
……
Hello, {{ user.name }}！
……
關(guān)鍵： ng-app 、 ng-model 和 { {user.name } }
首先： 元素的ng-app屬性。標(biāo)識(shí)這個(gè)DOM里面的內(nèi)容將啟用AngularJS應(yīng)用。
其次：告訴AngularJS，對(duì)頁(yè)面上的“user.name” 這個(gè)Model進(jìn)行雙向數(shù)據(jù)綁定。
第三：告訴AngularJS，在“{{ user.name}}”這個(gè)指令模版上顯示“user.name”這個(gè)Model的數(shù)據(jù)。
從Server到Controller再到View的數(shù)據(jù)交互：
……獲取名字 …… demoApp.controller("demoController", function($http, $scope){ $scope. getAjaxUser = function(){ $http.get({url:"../xxx.action"}).success(function(data){ $scope.user= data; }); $scope.user = {"name":"從JOSN中獲取的名稱(chēng)","age":22}; }; });改變$scope中的user，View也會(huì)自動(dòng)更新。
作用域 scope1>$scope
$scope是一個(gè)把view（一個(gè)DOM元素）連結(jié)到controller上的對(duì)象。在我們的MVC結(jié)構(gòu)里，這個(gè) $scope 將成為model，它提供一個(gè)綁定到DOM元素（以及其子元素）上的excecution context。
通俗一點(diǎn)$scope 實(shí)際上就是一個(gè)JavaScript對(duì)象，controller和view都可以訪問(wèn)它，所以我們可以利用它在兩者間傳遞信息。在這個(gè) $scope 對(duì)象里，我們既存儲(chǔ)數(shù)據(jù)，又存儲(chǔ)將要運(yùn)行在view上的函數(shù)。$scope是一個(gè)將view（一個(gè)DOM元素）連結(jié)到controller上的對(duì)象。每一個(gè)Angular應(yīng)用都會(huì)有一個(gè) $rootScope。這個(gè) $rootScope 是最頂級(jí)的scope，它對(duì)應(yīng)著含有 ng-app 指令屬性的那個(gè)DOM元素。
$scope也是一個(gè)JavaScript對(duì)象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。
所有$scope都遵循原型繼承，這意味著它們都能訪問(wèn)父$scope，也具有原型鏈那樣的特性，即向上訪問(wèn)屬性和方法，直到最頂層。
在ng-repeat、ng-switch、ng-view、ng-include都會(huì)創(chuàng)建一個(gè)新的子scope，所以問(wèn)題經(jīng)常在這些指令中出現(xiàn)。
在你的model中，帶有「.」將會(huì)確認(rèn)原型繼承在起作用。所以使用
比
更好。
如果你真的想要（或需要）使用一個(gè)原始的方式，有兩項(xiàng)工作：
在子scope中，使用$parent.parentScopeProperty。這將阻止子scope創(chuàng)建它自己的屬性。
在父scope上創(chuàng)建一個(gè)方法，并且從子scope中調(diào)用它，傳遞原始值到父scope中（并不總是起作用）。文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92604.html
摘要：事件只針對(duì)輸入框值的真實(shí)修改，而不是通過(guò)來(lái)修改。指令將給定表達(dá)式的值替換元素的內(nèi)容。指令還有另外一種轉(zhuǎn)換方式，如果你有字符串?dāng)?shù)組希望在輸入框中顯示，你可以在上使用指令。 指令 Directive 指令系統(tǒng)（Directive）是Angular應(yīng)用的一個(gè)重要特性。 是通過(guò)對(duì)DOM元素的標(biāo)簽丶屬性來(lái)增強(qiáng)HTML表現(xiàn)力，為其增加一些特定功能。本篇參考文檔Angular菜鳥(niǎo)教程 內(nèi)置指令 這里...
摘要：比如，我們可以監(jiān)聽(tīng)事件由實(shí)例發(fā)出，然后在任何瀏覽器中就是變化的時(shí)候都會(huì)得到通知，如下所示每一個(gè)作用域?qū)ο蠖紩?huì)有這個(gè)方法，可以用來(lái)注冊(cè)一個(gè)作用域事件的偵聽(tīng)器。這個(gè)函數(shù)所扮演的偵聽(tīng)器在被調(diào)用時(shí)會(huì)有一個(gè)對(duì)象作為第一個(gè)參數(shù)。 上一篇：【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（二） 下一篇：【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（四） 書(shū)名：Mastering W...
摘要：可選參數(shù)，布爾值或者對(duì)象默認(rèn)值為，可能取值默認(rèn)值。布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。 前言 最近學(xué)習(xí)了下angularjs指令的相關(guān)知識(shí)，也參考了前人的一些文章，在此總結(jié)下。 歡迎批評(píng)指出錯(cuò)誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...
摘要：本書(shū)的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會(huì)涵蓋模板，模塊化，和依賴(lài)注入。本書(shū)的小例子中我們會(huì)使用未經(jīng)壓縮的，開(kāi)發(fā)友好的版本，在的上。作用域也可以針對(duì)特定的視圖來(lái)擴(kuò)展數(shù)據(jù)和特定的功能。 上一篇：【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（一） 下一篇：【譯】《精通使用AngularJS開(kāi)發(fā)Web App》（三） 原版書(shū)名：Mastering Web Application D...
閱讀 3717·2023-04-26 00:56
閱讀 2706·2021-09-30 10:01
閱讀 974·2021-09-22 15:30
閱讀 3934·2021-09-07 10:21
閱讀 1541·2021-09-02 15:40
閱讀 2774·2021-08-30 09:47
閱讀 1256·2021-08-16 10:57
閱讀 1874·2019-08-30 14:01
