AngularJS入门教程之AngularJS指令  更新时间:2016年04月18日 12:06:39   投稿:mrr   AngularJS指令用于扩展HTML。本文给大家介绍AngularJS入门教程之AngularJS指令,感兴趣的朋友一起学习吧 熟悉HTML的朋友都知道,HTML有很多属性。比如标签的href属性可以来指定链接的URL地址,标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能。 AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-app指令 ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中,我们定义默认AngularJS应用使用div元素的ng-app 属性。 … ng-init 指令 ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中,我们将初始化countries数组。使用JSON语法来定义countries数组。 … ng-model指令 ng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中,我们定义了一个名为“name”的模型。 … Enter your Name: ng-repeat 指令 ng-repeat 指令重复html元素集合中的每个项目。在下面的例子中,我们已经迭代了数组countries。 … List of Countries with locale: {{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }} AngularJS指令示例 在输入框中尝试输入: 姓名: 你输入的为: {{ firstName }} ng-app 指令告诉 AngularJS当前 元素是 一个AngularJS 的应用程序,ng-init指令用于初始化数据,相当于javascript中的定义变量。AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过ng-model=”firstName” 进行同步。上面的例子将会在页面上同步显示你在输入框中输入的内容。 注意 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 使用 ng-init 初始化数据并不是很常见。您将在后续章节中学习到一个更好的初始化数据的方式。 ng-repeat 指令 ng-repeat 指令会重复一个 HTML 元素,相当于javascript里的each循环 使用 ng-repeat 来循环数组 {{ x }} 上面的例子中将会解析成下面的HTML Jani Hege Kai ng-repeat作用在对象数组上: 循环对象: {{ x.name + ‘, ‘ + x.country }} 将会解析成下面的HTML: Jani, Norway Hege, Sweden Kai, Denmark 自定义指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令, askh5Directive, 但在使用它时需要以 – 分割:askh5-directive 上面的例子解析成: 自定义指令! 可以通过以下几种方式来调用指令: 元素名: 属性: class名: 注释: restrict限制使用 restrict 值可以是以下几种: E 只限元素名使用 A 只限属性使用 C 只限类名使用 M 只限注释使用 restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 var app = angular.module(“myApp”, []); app.directive(“askh5Directive”, function() { return { restrict : “A”, template : “自定义指令!” }; }); 上面的AngularJS将只允许属性调用。 相关阅读: AngularJS入门教程之AngularJS表达式 以上内容是小编给大家介绍的AngularJS入门教程之AngularJS指令,希望对大家有所帮助! 您可能感兴趣的文章: AngularJS使用指令增强标准表单元素功能 学习Angularjs分页指令 AngularJS中的指令全面解析(必看) AngularJS入门(用ng-repeat指令实现循环输出 学习AngularJs:Directive指令用法(完整版) AngularJS中的指令实践开发指南(二) AngularJS 中的指令实践开发指南(一) 浅析AngularJS中的指令 在React框架中实现一些AngularJS中ng指令的例子 AngularJS 指令详细介绍 angularjs 指令 入门 相关文章 AngularJS监听路由变化的方法 本篇文章主要介绍了AngularJS监听路由变化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 AngularJS使用拦截器实现的loading功能完整实例 这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下 2017-05-05 AngularJS 防止页面闪烁的方法 我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这篇文章主要介绍了AngularJS 防止页面闪烁的方法,需要的朋友可以参考下 2017-03-03 使用AngularJS实现可伸缩的页面切换的方法 这篇文章主要介绍了使用AngularJS实现可伸缩的页面切换的方法,AngularJS是一款热门的JavaScript库,需要的朋友可以参考下 2015-06-06 AngularJS 让人爱不释手的八种功能 AngularJS 让人爱不释手的八种功能,想知道AngularJS哪八种功能让人喜欢就快点看下本文吧 2016-03-03 详解AngularJS脏检查机制及$timeout的妙用 本篇文章主要介绍了详解AngularJS脏检查机制及$timeout的妙用,“脏检查”是Angular中的核心机制之一,它是实现双向绑定、MVVM模式的重要基础,有兴趣的可以了解一下 2017-06-06 Angular 多模块项目构建过程 这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2020-02-02 详解Angular操作cookies方法 这篇文章主要介绍了详解Angular操作cookies方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-06-06 Angular2 环境配置详细介绍 这篇文章主要介绍了Angular2 环境配置的相关资料,需要的朋友可以参考下 2016-09-09 详解Angular的8个主要构造块 Angular 主要分为八大构造块(也就是八个核心概念):模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下 2017-06-06 最新评论

熟悉HTML的朋友都知道,HTML有很多属性。比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型。AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能。

AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令:

常用AngularJS指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-app指令

ng-app 指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中,我们定义默认AngularJS应用使用div元素的ng-app 属性。

<div ng-app="">
...
</div>

ng-init 指令

ng-init 指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中,我们将初始化countries数组。使用JSON语法来定义countries数组。

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

...
</div>

ng-model指令

ng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中,我们定义了一个名为“name”的模型。

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

ng-repeat 指令

ng-repeat 指令重复html元素集合中的每个项目。在下面的例子中,我们已经迭代了数组countries。

<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>

AngularJS指令示例

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div> 

ng-app 指令告诉 AngularJS当前<div> 元素是 一个AngularJS 的应用程序,ng-init指令用于初始化数据,相当于javascript中的定义变量。AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过ng-model=”firstName” 进行同步。上面的例子将会在页面上同步显示你在输入框中输入的内容。

注意

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。
使用 ng-init 初始化数据并不是很常见。您将在后续章节中学习到一个更好的初始化数据的方式。

ng-repeat 指令

ng-repeat 指令会重复一个 HTML 元素,相当于javascript里的each循环

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

上面的例子中将会解析成下面的HTML

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

ng-repeat作用在对象数组上:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>

将会解析成下面的HTML:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

自定义指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。 你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTMl 元素上需要添加自定义指令名。 使用驼峰法来命名一个指令, askh5Directive, 但在使用它时需要以 – 分割:askh5-directive

<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

上面的例子解析成:

<h1>自定义指令!</h1>

可以通过以下几种方式来调用指令:

元素名:<askh5-directive></askh5-directive>

属性:<div askh5-directive></div>

class名:<div class=”askh5-directive”></div>

注释:<!– 指令: askh5-directive –>

restrict限制使用

restrict 值可以是以下几种:

E 只限元素名使用

A 只限属性使用

C 只限类名使用

M 只限注释使用

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

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

上面的AngularJS将只允许属性调用。

相关阅读:

AngularJS入门教程之AngularJS表达式

以上内容是小编给大家介绍的AngularJS入门教程之AngularJS指令,希望对大家有所帮助!

您可能感兴趣的文章:

  • AngularJS使用指令增强标准表单元素功能
  • 学习Angularjs分页指令
  • AngularJS中的指令全面解析(必看)
  • AngularJS入门(用ng-repeat指令实现循环输出
  • 学习AngularJs:Directive指令用法(完整版)
  • AngularJS中的指令实践开发指南(二)
  • AngularJS 中的指令实践开发指南(一)
  • 浅析AngularJS中的指令
  • 在React框架中实现一些AngularJS中ng指令的例子
  • AngularJS 指令详细介绍
张贴在3