AngularJS指令

最新推荐文章于 2025-08-12 15:39:20 发布

原创最新推荐文章于 2025-08-12 15:39:20 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

AngularJS指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
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 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

使用 *ng-init 不是很常见。您将在控制器一章中学习到一个更好的初始化数据的方式。

1.关于数据的绑定：

上面实例中的{{ firstName }}表达式是一个AngularJS数据绑定表达式。
{{ firstName }}同步了 AngularJS 表达式与 AngularJS 数据。
{{ firstName }} 是通过 ng-model=”firstName” 进行同步。

2.重复HTML元素

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

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

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>

3.创建自定义的指令

使用 .directive 函数来添加自定义的指令，要调用自定义指令，HTML元素上需添加自定义指令名。
使用驼峰发来命名一个指令，myDirective，但是在使用它时需要以 - 分割，my-directive

<body ng-app="myApp">

<my-directive></my-directive>

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

</body>

你可以通过以下方式调用指令：
1.元素名

<my-directive></my-directive>

2.属性

<div my-directive></div>

3.类名

<div class="my-directive"></div>

4.注释

<!-- directive: my-directive -->

*.限制调用

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

restrict值可以是以下几种：

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

默认是EA。