AngularJS系列之常用指令

这节给大家介绍一下AngularJS中一些常用的指令,例如:ng-app、ng-init、ng-repeat、ng-model等等之类的指令。 那什么是AngularJS的指令呢,其实就是相当于HTML中的一些属性值,例如input中的type属性等等之类的。 下面就来介绍一下AngularJS中的指令:

AngularJS 指令:

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

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

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

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

下面给一个例子综合的介绍一下这三个指令的用法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
</body>
</html>

从例子可以看出,先是在div中添加ng-app属性,表示这个div是AngularJS应用程序的所有者,这样接下来才可以继续使用其他的一些指令。

运行这个程序你会发现一个很有意思的事情,那就是你一修改输入框中的值,下面表达式就会马上随之发生改变,这就是ng-model的最大特点之一。

利用ng-model你就可以轻轻松松做数据同步了,不需要再编写复杂的js代码来实现这一效果,轻松利用ng-model就可以实现这一效果。

还有一个比较重要的指令就是:ng-repeat 这个指令最大的作用就是循环输出HTML元素,类似于js中的each功能。下面给出一个例子来介绍这个指令的具体用法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
</body>
</html>

从上面这个例子就可以明显的看出,通过ng-repeat这个指令,实现了ul中li的遍历输出。

用法就是上面的“x in names”通过这个代码就可以实现类似于js中的in方法,把names中的值一个个取出来并放到x这个变量中,最后放到{{x}}中展示在HTML中去。

除了上面说到的一些系统指令外,AngularJS中还可以自己定义指令,下面就给大家介绍一下AngularJS是如何实现自定义指令的:

创建自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>
</html>

自定义的指令调用方法有多种,例如:元素名、属性、类名、注释这四种方法来实现自定义指令的调用。

下面就给大家介绍一下这些方法各自调用的例子:

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

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

类名:<div class="runoob-directive"></div>

注释:<!-- 指令: runoob-directive -->

当然咱们也可以通过限制指令让它只能通过特定的方法触发。下面给出一个例子:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
<p><strong>注意:</strong> 通过设置 <strong>restrict</strong> 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。</p>
</body>
</html>

restrict 值可以是以下几种:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用。

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。利用自定义指令就可以实现很多自己想要的功能了,是不是非常方便呀。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

Asp.net MVC Jquery提交后乱码问题

最近在处理MVC时,遇到要将特殊字符,或者XML格式的数据传递到后台,但是后台解析发现无法识别,处理有误。

732
来自专栏技术沉淀

Rails里实现Filter功能

653
来自专栏大内老A

WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[下篇]

WCF客户端和服务端的框架体系相互协作,使得开发人员可以按照我们熟悉的方式进行异常的处理:在服务操作执行过程中抛出异常(FaultException),在调用服...

1779
来自专栏谦谦君子修罗刀

静态内存区域解析

通常在代码中产生的bug,往往是源于概念不清晰。知己知彼百战不殆,对内存这块了如指掌,能极大优化代码的性能。 一、内存四区建立流程讲解 ? 如上图所示,首先操作...

2596
来自专栏大内老A

WCF技术剖析之二十四: ServiceDebugBehavior服务行为是如何实现异常的传播的?

服务端只有抛出FaultException异常才能被正常地序列化成Fault消息,并实现向客户端传播。对于一般的异常(比如执行Divide操作抛出的Divide...

1878
来自专栏陈仁松博客

UWP基础教程 - XAML标记扩展

标记扩展(Markup Extensions)是一个被广泛使用的XAML语言概念。通过XAML标记扩展来设定属性值,从而可以让对象元素的属性具备更加灵活和复杂的...

3427
来自专栏aCloudDeveloper

局部变量,静态局部变量,全局变量,静态全局变量在内存中的存放区别(转)

     我们先来看内存中的几大区:  内存到底分几个区? 下面有几种网上的理解,我整理一下: 一:  1、栈区(stack)— 由编译器自动分配释放 ,存放函...

2208
来自专栏LanceToBigData

struts2(三)之表单参数自动封装与参数类型自动转换

前言   对struts2的使用不外乎这几点,参数自动封装,拦截器的使用,数据校验,ognl表达(值栈和actionContext的讲解),struts2的标签...

21210
来自专栏互联网技术栈

《Effective Java 》系列一

编写实例受控类有几个原因。实例受控使得类可以确保他是一个Singleton或者是不可实例化的。他还使得不可变类可以确保不会存在两个相等的实例。

954
来自专栏三流程序员的挣扎

什么是闭包

闭包 Closures,最初接触大概是在看 Swift 文档的时候,但是似是而非,好像明白了,好像就没彻底明白,记得当时也查了一些资料,终究是没彻底弄清楚。

721

扫码关注云+社区