欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS入门教程之AngularJS指令

程序员文章站 2022-05-13 21:37:47
熟悉html的朋友都知道，html有很多属性。比如标签的href属性可以来指定链接的url地址，标签的type属性可以用来指定i...

熟悉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将只允许属性调用。

上一篇： MacOS 安装 PHP的图片裁剪扩展Tclip

下一篇： Go语言中TCP/IP网络编程的深入讲解

推荐阅读