angularJS（一）：表達式、指令

時間 2019-12-10

標籤 angularjs 表達式指令欄目 AngularJS 简体版

原文原文鏈接

簡介

以 JavaScript 編寫的庫，是一個 JavaScript 框架express

1、表達式

AngularJS 使用 表達式 把數據綁定到 HTML。數組

表達式寫在雙大括號內：{{ expression }}。
表達式把數據綁定到 HTML，與 ng-bind 指令有殊途同歸之妙。
將在表達式書寫的位置"輸出"數據。
它們能夠包含文字、運算符和變量。實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }

2、指令

AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。app

ng-app	初始化一個 AngularJS 應用程序（告訴 AngularJS，ng-app所在元素是 AngularJS 應用程序的"全部者"。） <div ng-app="" ng-init="firstName='John'"> <p>在輸入框中嘗試輸入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你輸入的爲： {{ firstName }}</p> </div> View Code
ng-init	定義初始值
ng-model	把元素值（好比輸入域的值）綁定到應用程序。用於表單元素的，支持雙向綁定（在修改輸入域的值時， AngularJS 屬性的值也將修改：）。對普通元素無效（{數據綁定：{ firstName }} 是經過 ng-model="firstName" 進行同步。）框架模型ide ng-model 指令用於綁定應用程序數據到 HTML 控制器(input, select, textarea)的值ui <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script> View Code <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span> </form> 驗證用戶輸入 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'"> Email: <input type="email" name="myAddress" ng-model="myText" required></p> <h1>狀態</h1> {{myForm.myAddress.$valid}} {{myForm.myAddress.$dirty}} {{myForm.myAddress.$touched}} </form> 應用狀態 `ng-model` 指令根據表單域的狀態添加/移除如下類：(生成的類名)spa ng-empty ng-not-empty ng-touched布爾值屬性，表示用戶是否和控件進行過交互 ng-untouched ng-valid布爾型屬性，它指示表單是否經過驗證。若是表單當前經過驗證，他將爲true ng-invalid未經過驗證的表單 ng-dirty布爾值屬性，表示用戶是否修改了表單。若是爲ture，表示沒有修改過；false表示修改過 ng-pending ng-pristine布爾值屬性，表示用戶是否修改了表單。若是爲ture，表示沒有修改過；false表示修改過
ng-repeat	對於集合中（數組中）的每一個項會克隆一次 HTML 元素 <div data-ng-app="" data-ng-init="names=['Jani1','Hege','Kai']"> <p>使用 ng-repeat 來循環數組</p> <ul> <li data-ng-repeat="x in names"> {{ x }} </li> </ul> </div> View Code

建立自定義指令：雙向綁定

使用駝峯法來命名一個指令， runoobDirective, 但在使用它時須要以 - 分割, runoob-directive:
元素<runoob-directive></runoob-directive>
只能經過屬性的方式來調用，restrict : "E",

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定義指令!</h1>"
    };
});
</script>

View Code

屬性<div runoob-directive></div>
只能經過屬性的方式來調用，restrict : "A",

<body ng-app="myApp">

<div runoob-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定義指令!</h1>"
    };
});
</script>

View Code

類名<div class="runoob-directive"></div>
只能經過屬性的方式來調用，restrict : "C",

<body ng-app="myApp">

<div class="runoob-directive"></div>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "C",
        template : "<h1>自定義指令!</h1>"
    };
});
</script>

View Code

註釋
只能經過屬性的方式來調用，restrict : "M",

<body ng-app="myApp">

<!-- directive: runoob-directive -->

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定義指令!</h1>"
    };
});
</script>