AngularJS語法基礎及數據綁定——詳解各類數據綁定指令、屬性應用

時間 2019-11-12

標籤 angularjs 語法基礎數據綁定詳解各類指令屬性應用欄目 AngularJS 简体版

原文原文鏈接

　　AngularJS簡單易學，可是功能強大。特別是在構建單頁面應用方面效果顯著。而數據綁定能夠說是他被普遍使用的最主要的優勢。他捨棄了對DOM的操做方式，一切都由AngularJS來自動更新視圖，咱們沒必要寫操做dom的代碼。接下來咱們就詳細解釋下AngularJS中數據綁定的方式，及其具體的使用規則、技巧。javascript

　　首先介紹下這次博客的內容：css

　　　　1.第一部分，介紹最最基本的AngularJS的根應用、控制器的基本語法，爲初學者準備的。html

　　　　2.第二部分，詳解如何數據綁定，3種綁定方式的區別。分別用於什麼狀況。java

　　那麼，接下來，咱們就開始介紹了，對某一部分感興趣的朋友，能夠直接按照大標題一、2進行閱讀。jquery

1. AngularJS基礎語法　　數組

　　首先，咱們看一段簡單的代碼：瀏覽器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJS入門</title>
        <style type="text/css">
            div{
                width: 150px;
                height: 50px;
                line-height: 50px;
                border-radius: 25px;
                background-color: darkorange;
                margin-top: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body ng-app="myApp" ng-controller="myControl">
     
    </body>
    <script language="JavaScript" src="js/jquery-3.1.1.min.js"></script>
    <script language="JavaScript" src="js/angular.min.js"></script>
    <script type="text/javascript">
//        他是鏈式語法,不一樣控制器能夠直接在後面加點鏈接
        angular.module("myApp",[])
        .controller("myControl",function($scope){
            $scope.d = "我是自定義的變量";
        })

    </script>
</html>

　　如今咱們解釋一下上面的代碼：app

　　ng-app="myApp"　　是指定應用程序的根元素，也就是說，整個頁面咱們全部的AnjularJs內容都必須包含在這個HTML標籤中。dom

　　ng-controller="myControl"　　是給咱們的應用添加控制器，咱們經過不一樣名字的控制器將整個應用劃分爲若干個模塊，實現不一樣的功能。
函數

　　angular.module("myApp",[]) .controller("myControl",function($scope，$rootscope){ $scope.d = "我是自定義的變量"; })　　AnjularJs是鏈式語法,能夠直接在後面加點鏈接實現調用。angular.module("myApp",[])是規定的格式化寫法，函數內第一個參數時應用的名稱；第二個參數是一個數組，注入咱們須要的模塊名稱，注意此參數不可省略。controller函數，第一個參數傳入控制器名稱；第二個參數傳入一個構造函數，函數的形參$scope代指用特定義的變量是局部有效的，在當前控制器有效。$rootscope，用他定義的變量在整個app中有效，不侷限於某個控制器。

　　$scope.d = "我是自定義的變量"; 這是定義變量，並賦值。$scope定義的是當前控制器有效的局部變量；$rootscope定義的是全局變量，在整個app範圍內有效。

　　這裏只是簡單的介紹了應用、處理器、變量的定義與使用，想了解的更加詳細建議去菜鳥教程查看更加詳細的說明。

2. 詳解數據綁定

　　首先咱們看一段代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJS入門</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 50px;
                line-height: 50px;
                border-radius: 25px;
                background-color: darkorange;
                margin-top: 20px;
                text-align: center;
            }
        </style>
    </head>
    <body ng-app="myApp" ng-controller="myControl">
        <div ng-init="a='打印出我來'">下面是綁定數據的div</div>
        <!--ng-bind 指令告訴 AngularJS 使用給定的變量或表達式的值來替換 HTML標籤裏的內容。-->
        <div ng-bind="a">+我是原來的內容</div>
        <!--{{a}}雙層大括號，裏面加變量名，也是數據綁定，可是刷新會顯示出大括號來-->
        <div>{{a}}+我是原來的內容</div>
        
        <!--他是一個雙向綁定，將HTML內容與變量綁定在一塊兒，不管改變哪個的值，另外一個都會發生變化-->
        <input type="text" name="text" id="text" value="" ng-model="b"/>
        <div ng-bind="b" ng-init="b='aaaa'"></div>
        <div>{{b}}</div>
    <script language="JavaScript" src="js/jquery-3.1.1.min.js"></script>
    <script language="JavaScript" src="js/angular.min.js"></script>
    <script type="text/javascript">
//        他是鏈式語法,不一樣控制器能夠直接在後面加點鏈接
        angular.module("myApp",[])
        .controller("myControl",function($scope){
            $scope.d = "我是自定義的變量";
        })

    </script>
</html>

其效果以下圖所示：

那麼實現數據綁定都有那些方式呢？基本上有3種:

　　(1) {{變量/表達式}} 經過這種方式直接綁定數據。注意：a.他是直接修改標籤的內容。原來內容不變，再插入變量的內容。b.瀏覽器須要首先加載index.html頁面，渲染它，而後AngularJS才能把它解析成你指望看到的內容。因此，用戶會刷新看到大括號的存在。c.他是單向綁定，只能經過修改變量的值來改變標籤的內容。

　　(2) ng-bind="變量" 直接將變量綁定到HTML標籤中。注意：a.他是直接重置標籤的內容。本來的內容清空直接寫入新的變量的內容。b.他不會出現刷新顯示大括號的問題。c.他是單向綁定，只能經過修改變量的值來改變標籤的內容。

　　(3) ng-model="b" + ng-bind="b" 。能夠理解爲先將標籤的屬性值取出來綁定到變量上，再將變量綁定到另外一個標籤上。

　　　　注意：a. <input>, <select>, <textarea>,元素支持該指令。也就這幾個能夠輸入的表單元素能夠綁定。b.ng-model綁定好的變量，能夠用上述兩種方式的一種來綁定到標籤中。這個看具體的需求。c.他是一個雙向綁定，將HTML內容與變量綁定在一塊兒，不管改變哪個的值，另外一個都會發生變化。例如上述代碼中，給變量b進行了初始化，而後input輸入框的value值就默認是b的值了。

　　而對於ng-model還有對應的設置他的其餘參數的屬性，ng-model-options，均可以設置以下屬性值：

　　　　{updateOn: 'event'}規則指定事件發生後綁定數據
       　{debounce : 1000} 規定等待多少毫秒後綁定數據
       　 {allowInvalid : true|false} 規定是否須要驗證後綁定數據
       　 {getterSetter : true|false} 規定是否做爲 getters/setters 綁定到模型
       　 {timezone : '0100'} 規則是否使用時區

　　舉例說明一下，咱們加入以下代碼：

<input type="text" name="text" id="text" value="" ng-model="c" ng-model-options="{debounce : 2000}"/>
<div ng-bind="c">11111</div>
<div ng-bind="d"></div>