AngularJS 指令

Name:

你写了: {{ firstName }}

元素是AngularJS应用程序的“所有者”。



数据绑定

所述的 {{ firstName }} 表达，在上述的例子中，是一个AngularJS数据绑定表达式。

{{ firstName }} 与 {{ ng-model = "firstName" }} 绑定。

在下一个示例中，两个文本字段与两个ng-model指令绑定在一起：

尝试一下

使用 ng-init 并不是很常见。 在关于控制器的章节中，您将学到更好的初始化数据的方法。



重复HTML元素

ng-repeat 指令重复一个HTML元素：

尝试一下

ng-repeat 指令实际上为集合中的每个项目克隆一次HTML元素。

用于对象数组的 ng-repeat 指令：

尝试一下

AngularJS非常适合数据库CRUD（创建读取更新删除）应用程序。



ng-app 指令

ng-app 指令定义AngularJS应用程序的根元素。

加载网页后，ng-app 指令将自动引导（自动初始化）应用程序。



ng-init 指令

ng-init 指令定义AngularJS应用程序的初始值。

通常，您不会使用 ng-init。 您将改为使用控制器或模块。

下面您将了解有关控制器和模块的更多信息。



ng-model 指令

ng-app 指令将HTML控件的值（input, select, textarea）绑定到应用程序数据。

ng-model 指令还可以：

提供应用程序数据（number、email、required）的类型验证。

提供应用程序数据的状态（invalid, dirty, touched, error）。

提供HTML元素的CSS类。

将HTML元素绑定到HTML表单。

在下一章中阅读有关ng-model指令的更多信息。



创建新指令

将一个控制器添加到您的应用程序，并使用 ng-controller 指令引用该控制器：

除了所有内置的 AngularJS 指令之外，您还可以创建自己的指令。

新指令是使用 .directive 函数创建的。

要调用新指令，请使HTML元素具有与新指令相同的标记名。

在命名指令时，必须使用驼峰式案例名称 jc2182Directive，但是在调用该指令时，必须使用-分隔名称，jc2182-directive：

尝试一下

您可以使用以下命令来调用指令：

元素名称

属性

类

注释

下面的示例将产生相同的结果：

元素名称

尝试一下

属性

尝试一下

类

尝试一下

注释

尝试一下



限制条件

您可以限制指令仅由某些方法调用。

通过添加值为 "A" 的restrict属性，该指令只能由属性调用：

尝试一下

限制值为：

E 为元素名称

A 为属性

C 为类名称

M 为注释

默认情况下，该值为EA，这意味着元素名称和属性名称均可调用该指令。

有关完整的AngularJS指令参考，请访问我们的AngularJS参考手册。

上一节: AngularJS 模块

上一节

下一节: AngularJS 模型

下一节

查看笔记 分享笔记

笔记内容：

称呼：

Email：

站点：

分享笔记 重置

分类导航

前端

Ajax 教程

Angular 教程

Aurelia 教程

Bootstrap 教程

ChartJS 教程

CSS 教程

ES6 教程

FontAwesome 教程

HTML 教程

HTML 字符集 教程

HTML 游戏 教程

JavaScript 教程

jQuery 教程

Less 教程

React 教程

Sass 教程

Stylus 教程

TypeScript 教程

Unity 教程

Vue.js 教程

WebAssembly 教程

XAML 教程

颜色 教程

服务端

C# 教程

C++ 教程

COBOL 教程

C语言 教程

Fortran 教程

Go 教程

Groovy 教程

Java 教程

JSP 教程

JVM 教程

Kotlin 教程

Lisp 教程

Lua 教程

Node.js 教程

Pascal 教程

Perl 教程

PHP 教程

Python 教程

Python 3 教程

Ruby 教程

Rust 教程

Scala 教程

Spring 教程

Spring Boot 教程

Spring Cloud 教程

VB.Net 教程

移动端

Android 教程

IOS 教程

Objective-C 教程

React Native 教程

Swift 教程

小程序 教程

数据库

Access 教程

DB2 教程

Mariadb 教程

Memcached 教程

MongoDB 教程

MySQL 教程

Neo4j 教程

PL/SQL 教程

PostgreSQL 教程

Redis 教程

SQL 教程

SQL Server 教程

SQLite 教程

T-SQL 教程

数据格式

Jackson 教程

JSON 教程

SVG 教程

XML 教程

开发工具

ActiveMQ 教程

Ant 教程

Apache HttpClient 教程

Apache POI PPT 教程

AWS 教程

Docker 教程

ElasticSearch 教程

ExpressJS 教程

GIT 教程

GitLab 教程

Google Maps 教程

Gradle 教程

Java NIO 教程

JavaFX 教程

JavaMail 教程

JDBC 教程

jMeter 教程

JPA 教程

jsoup 教程

Junit 教程

KoaJS 教程

Kubernetes 教程

Log4j 教程

Logstash 教程

Lucene 教程

Makefile 教程

Maven 教程

RESTful 教程

Sed 教程

SEO 教程

Servlet 教程

SLF4J 教程

Socket.IO 教程

Struts 教程

SVN 教程

TestNG 教程

UML 教程

UNIX / LINUX 教程

WebSocket 教程

WPF 教程

xStream 教程

区块链 教程

数据处理

Flink 教程

Flume 教程

Hadoop 教程

Hbase 教程

Hive 教程

Kafka 教程

Kibana 教程

MapReduce 教程

MATLAB 教程

MyBatis 教程

Pig 教程

R语言 教程

Solr 教程

Spark 教程

Storm 教程

Zookeeper 教程

大数据分析 教程

数据仓库 教程

数据挖掘 教程

计算机基础

HTTP 教程

IPv4 教程

IPv6 教程

Ubantu 教程

WebServices 教程

嵌入式系统 教程

操作系统 教程

数据结构和算法 教程

汇编语言 教程

物联网 教程

电子电路基础 教程

编译器设计 教程

网站开发 教程

计算机 教程

计算机基础 教程

计算机网络 教程

设计模式 教程

AI

CNTK 教程

Keras 教程

PyTorch 教程

TensorFlow 教程

人工智能 教程

机器学习 教程

Python 技术

Django 教程

Flask 教程

NumPy 教程

Pandas 教程

Pillow 教程

PyGTK 教程

PyQt5 教程

PySpark 教程

pytest 教程

Python -数据科学 教程

Python MySQL 教程

Python 取证 教程

Python 数据结构 教程

Python 文本处理 教程

Python 网络编程 教程

Python 网页抓取 教程

Python 设计模式 教程

RxPY 教程

SciPy 教程

Seaborn 教程

SymPy 教程

wxPython 教程

框架

Laravel 教程

Web 图标Icon 教程

Web2py 教程

WebGL 教程

WebRTC 教程

WordPress 教程

Yii 教程

Zend Framework 教程

SAP

Crystal Reports 教程