AngularJS 世界------Angularjs指令的使用方式和自定义指令

你的名字 2023-02-08 13:00 8阅读 0赞

AngularJS 通过被称为 指令 的新属性来扩展 HTML。
    AngularJS 通过内置的指令来为应用添加功能。
    AngularJS 允许你自定义指令。

# AngularJS 内置指令 #

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。  
例如之前用过的几个指令：  
ng-app 指令初始化一个 AngularJS 应用程序。  
ng-init 指令初始化应用程序数据。  
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。  
基本的指令内容可以参考[angularjs指令手册][angularjs]

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

## 数据绑定 ##

数据绑定是angularjs有一个重要的特性  
上面实例中的 \{ \{ blogname\}\} 表达式是一个 AngularJS 数据绑定表达式。  
AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。  
\{ \{ blogname\}\} 是通过 ng-model=”blogname” 进行同步。

## 重复 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-app 指令 ##

ng-app 指令定义了 AngularJS 应用程序的 根元素。  
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。  
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=”myModule”）连接到代码模块。

## ng-init 指令 ##

ng-init 指令为 AngularJS 应用程序定义了 初始值。  
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。  
稍后您将学习更多有关控制器和模块的知识。

## ng-model 指令 ##

ng-model 指令 绑定 HTML 元素 到应用程序数据。  
ng-model 指令也可以：  
为应用程序数据提供类型验证（number、email、required）。  
为应用程序数据提供状态（invalid、dirty、touched、error）。  
为 HTML 元素提供 CSS 类。  
绑定 HTML 元素到 HTML 表单。

## ng-repeat 指令 ##

ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

# 创建自定义的指令 #

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。  
你可以使用 .directive 函数来添加自定义的指令。  
要调用自定义指令，HTMl 元素上需要添加自定义指令名。  
\*使用驼峰法来命名一个指令， iceboyDirective,  
但在使用它时需要以 - 分割, iceboy-directive；  
\*自定义指令可以通过多种方式来进行调用，  
也可以限制你的指令只能通过特定的方式来调用，  
如：元素名、属性、类名、注释  
restrict 值可以是以下几种:  
E 只限元素名使用  
A 只限属性使用  
C 只限类名使用  
M 只限注释使用，需要增加 replace : true,  
restrict 默认值为 EACM, 即可以通过元素名、属性名、类名和注释来调用指令。

<body ng-app="myApp">
    <iceboy-directive></iceboy-directive>
    <div iceboy-directive></div>
    <div class="iceboy-directive"></div>
    
    <script>
    var app = angular.module("myApp", []);
    app.directive("iceboyDirective", function() {
         
        return {
            restrict : "EACM",
            replace : true,
            template : "<h1>MySelf-Directive!</h1>"
        };
    });
    </script>
    </body>

[angularjs]: http://blog.csdn.net/qq443068902/article/details/51239486