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>

View Code

restrict 默认值为 EA, 便可以经过元素名和属性名来调用指令。rest