Angular js的指令

AngularJS基础指令详解

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了AngularJS中几个常用的基础指令，包括ng-app、ng-init、ng-model、ng-bind、ng-repeat及自定义指令的使用方法。这些指令能够帮助开发者实现数据绑定、列表展示等功能。

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

1.ng-app:会使<div>中的变量被Angular js 解析

2.ng-init：初始化应用程序数据。 {{ firstName }}是Angular js的数据绑定表达式。

3.ng-model：把元素值（比如输入域的值）绑定到应用程序。

<div ng-app="" ng-init="quantity=4;price=5">
 
<h2>价格计算器</h2>
 
数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price">
 
<p><b>总价：</b> {{ quantity * price }}</p>
 
</div>//总价会是20

4.ng-bind：告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。

<div ng-app="" ng-init="myText='Hello World!'">

<p ng-bind="myText"></p>

</div>//运行结果：'Hello World!'

5.ng-repeat ：重复一个 HTML 元素

<div ng-app="" ng-init="names=['1','2','3']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

会遍历显示：1,2,3

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

使用 .directive 函数来添加自定义的指令。在使用它时需要以 - 分割, runoob-directive

通过设置 restrict 属性值为 "A" 来设置指令只能通过 HTML 元素的属性来调用。