資訊專欄INFORMATION COLUMN
摘要：功能數據綁定的雙向數據綁定，一方面可以做到變化驅動了中元素變化，另一方面也可以做到元素的變化也會影響到。其次告訴，對頁面上的這個進行雙向數據綁定。第三告訴，在這個指令模版上顯示這個的數據。作用域是一個把一個元素連結到上的對象。
功能 數據綁定
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的項目為當前選中項
$("").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的數據交互：
……
Hello, {{ user.name }}！
……
關鍵： ng-app 、 ng-model 和 { {user.name } }
首先： 元素的ng-app屬性。標識這個DOM里面的內容將啟用AngularJS應用。
其次：告訴AngularJS，對頁面上的“user.name” 這個Model進行雙向數據綁定。
第三：告訴AngularJS，在“{{ user.name}}”這個指令模版上顯示“user.name”這個Model的數據。
從Server到Controller再到View的數據交互：
……獲取名字 …… 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也會自動更新。
作用域 scope1>$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中，帶有「.」將會確認原型繼承在起作用。所以使用
比
更好。
如果你真的想要（或需要）使用一個原始的方式，有兩項工作：
在子scope中，使用$parent.parentScopeProperty。這將阻止子scope創建它自己的屬性。
在父scope上創建一個方法，并且從子scope中調用它，傳遞原始值到父scope中（并不總是起作用）。文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92604.html
摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內容。指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在上使用指令。 指令 Directive 指令系統（Directive）是Angular應用的一個重要特性。 是通過對DOM元素的標簽丶屬性來增強HTML表現力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程 內置指令 這里...
摘要：比如，我們可以監聽事件由實例發出，然后在任何瀏覽器中就是變化的時候都會得到通知，如下所示每一個作用域對象都會有這個方法，可以用來注冊一個作用域事件的偵聽器。這個函數所扮演的偵聽器在被調用時會有一個對象作為第一個參數。 上一篇：【譯】《精通使用AngularJS開發Web App》（二） 下一篇：【譯】《精通使用AngularJS開發Web App》（四） 書名：Mastering W...
摘要：可選參數，布爾值或者對象默認值為，可能取值默認值。布爾值或者字符，默認值為這個配置選項可以讓我們提取包含在指令那個元素里面的內容，再將它放置在指令模板的特定位置。 前言 最近學習了下angularjs指令的相關知識，也參考了前人的一些文章，在此總結下。 歡迎批評指出錯誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...
摘要：本書的這一部分將為隨后的章節打下基礎，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經壓縮的，開發友好的版本，在的上。作用域也可以針對特定的視圖來擴展數據和特定的功能。 上一篇：【譯】《精通使用AngularJS開發Web App》（一） 下一篇：【譯】《精通使用AngularJS開發Web App》（三） 原版書名：Mastering Web Application D...
閱讀 3708·2023-04-26 00:56
閱讀 2686·2021-09-30 10:01
閱讀 961·2021-09-22 15:30
閱讀 3915·2021-09-07 10:21
閱讀 1507·2021-09-02 15:40
閱讀 2750·2021-08-30 09:47
閱讀 1234·2021-08-16 10:57
閱讀 1862·2019-08-30 14:01
