AngularJs -- 指令简介

整理书籍内容（QQ:283125476 发布者：M 【重在分享，有建议请联系-》QQ号】）

HTML文档

HTML文档是一个纯文本文件，包含了页面的结构以及由CSS定义的样式，或者可以操作样式的JavaScript。

HTML节点

HTML节点是嵌套在另一个元素内的元素或一串字符。除了文本节点外，所有元素都是节点。

HTML元素

HTML元素由一个开始标签和一个结束标签组成。

HTML标签

HTML标签用来标记元素的开始和结束。标签本身用尖括号来生命。

开始标记的名字会同时被当作元素的名字，同时标签还会包含用来修饰元素的属性。

属性

属性用来给HTML元素添加额外的信息。这些属性设置在开始标记中。可以使用如KEY=“VALUE”的键值对设置它们，或者只设置键。

指令：自定义HTML元素和属性

基于我们对HTML元素的理解，指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径。例如：我们创建一个自定义元素，它实现了标签的功能并且能在所有浏览器中工作：

<my-better-video my-href="/goofy-video.mp4"> Caneventaketext</my-better-video>

注意，这个自定义元素使用了特殊的开始和闭合标签my-better-video，以及my-href这个自定义属性。为了让这个标签更有用，

可以将浏览器默认的video标签重载，用下面这种写法代替它：

<video my-href="/goofy-video.mp">

    Can still take children nodes

</video>

正如我们看到的那样，指令可以和其他指令或者属性组合在一起使用，这种组合使用的方式叫做合成。

HTML引导

当浏览器加载一个包含AngularjS应用的HTML时，我们只需要一小段很简单的代码就能够启动AngularJS应用。

在HTML中要用内置指令ng-app标记出应用的根节点。这个指令需要以属性的形式来使用，因此可以将这它写到任何位置

，但是写到的开始标签上椒最常用的做法：

.内置指令椒打包的AngularJS内部的指令，所有内置指令的命名空间都使用ng作为前缀。为了防止命名空间

冲突，不要在自定义指令前加ng前缀。

<html ng-app="myApp">

    <!-- 应用的$rootScope -->

</html>

做好如上的准备，就可以在HTML元素中使用所有内置或自定义的指令了。同时，基于JavaScript的原型继承机制，任何

在这个根元素内部的指令只要能够访问作用域，就可以访问$rootScope。这里的能够访问作用域指的是同DOM进行了链接，这个操作

会在指令稍后的生命周期中今进行。

我们的第一个指令

学习指令最快的方式就是使用它，现在就开始创建一个自定义的指令。

<my-directive></my-directive>

假设我们已经创建了一个完整的HTML文档，其中包含了AngularJS，并且DOM中已经用ng-app指令标识出应用的跟元素，当AngularJS编译THML时

就会调用指令。

调用指令意味着执行指令背后与之相关联的JavaScript代码，这些代码是我们用指令定义写出来的。

myDirective指令的定义看起来是这样的：

angular.module('myApp',[])

.directive('myDirective', function() {

    return {

        restrict: 'E',   //限定

        template: '<a href="http://google.com">

        Click me to go to Google</a>'

    };

});

通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符

串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回一个对象。

.驼峰命名风格用来将一个短语写在一个单词中，除了第一个单词外其他单词首字母大写，中间不加空格。例如，bumpy roads用驼峰风格来写应该是bumpyRoads。
.在我们的例子中，在HTML里使用my-directive声明指令，因此指令定义必须以myDirective为名字。

directive()方法返回的对象包含了用来定义和配置指令所需的方法和属性。

为了尽快掌握简单的属性定义，我们只用了restrict和template两个设置项来定义指令。

默认情况下，AngularJS将模版生成的HTML代码嵌套在自定义标签内部。

在指令定义中添加一些新的设置：我们可以将自定义标签从生成的DOM中完全移除掉，

并只留下由模版生成的链接。将replace设置为true就可以实现这个效果：

angular.module('myApp', [])

.directive('myDirective', function() {

    return {

        restrict: 'E',

        replace: true,

        template: '<a href="http://google.com">Click me to go to Google</a>'

    };

});

从现在起，我们把创建的这些自定义元素称作指令（用.directive()方法创建），因为事实上声明指令并不需要创建一个新的自定义元素。

声明指令本质上是在HTML中通过元素、属性、类或注释来添加功能。

如下都是用来声明前面创建指令的合法格式：

<my-directive></my-directive>

<div my-directive></div>

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

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

为了让AngularJS能够调用我们的指令，需要修改指令定义中的restrict设置。这个设置告诉AngularJS在编译HTML时用哪种声明格式来匹配指令

定义。我们可以指定一个或多个格式。

例如，之前创建的指令中可以指定以元素（E）、属性（A）、类（C）或注释（M）的格式来调用指令：

angular.module('myApp', [])

.directive('myDirective', function() {

    return {

        restrict: 'EAC',

        replace: true,

        template: '<a href="http://google.com">Click me to go to Google</a>'

    };

});

无论有多少种方式可以声明指令，我们坚持使用属性方式，因为它有比较好的跨浏览器兼容性：

<div my-directive></div>

为了更加明确我们的意图，将restrict设置为字母A（代表attribute）：

restrict: 'A'

遵守这个约定的同时，也要注意每个浏览器的内置样式，以便决定指令模版在HTML中是嵌套在声明元素内，还是替换声明元素。

表达式

由于指令可以用属性的形式调用，我们可能会好奇如果给属性赋值会发生什么：

<h1 ng-init="greeting='HelloWorld'">

    The greeting is: {{ greeting }}

</h1>

我们将表达式greeting = 'Hello World'赋值给内置指令ng-init。在表达式中，我们将greeting属性的值设置为Hello World，然后计算花括号内的{{ greeting }}

这个表达式的值。

这两种情况都会在当前作用域中计算一个普通的JavaScript表达式。根据这个表达式放置的位置不同，当前作用域可以是AngularJS在应用启动时调用

ng-app实例化的$rootScope，也可以是某个子作用域，比如某个控制器的作用域。

用表达式来声明指令

我们知道声明指令既可以使用表达式，也可以不使用表达式。以下是几个合法的表达式

<my-directive="someExpression">

</my-directive>

<div my-directive="someExpression">

</div>

<div class="my-directive:someExpression">

</div>

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

这里有一个值得注意的问题，赋值给指令的表达式会在哪里个环境中运行？要回答这个问题，首先要了解

一个复杂但非常重要的概念，就是当前作用域，它由DOM周围嵌套的控制器提供。

当前作用域介绍

首先快速了解一下由DOM通过内置指令ng-controller提供的作用域。这个指令的作用是在DOM中创建一个新的子作用域：

HTML

<p>We can access: {{ rootProperty }}</p>

<div ng-controller="ParentController">

    <p>We can access: {{ rootProperty }}

    and {{ parentProperty }}</p>

    <div ng-controller="ChildController">

        <p>

            We can access:

            {{ rootProperty }} and

            {{ parentProperty }} and

            {{ childProperty }}

        </p>

        <p>{{ fullSentenceFromChild }}</p>

    </div>

</div>

JAVASCRIPT

angular.module('myApp', [])

.run(function($rootScope) {

    // 使用.run访问$rootScope

    $rootScope.rootProperty = 'root scope';

})

.controller('ParentController', function($scope) {

    // 使用.controller访问`ng-controller`内部的属性

    // 在DOM忽略的$scope中，根据当前控制器进行推断

    $scope.parentProperty = 'parent scope';

})

.controller('ChildController', function($scope) {

    $scope.childProperty = 'child scope';

    // 同在DOM中一样，我们可以通过当前$scope直接访问原型中的任意属性

    $scope.fullSentenceFromChild = 'Same $scope: We can access: ' +

        $scope.rootProperty + ' and ' +

        $scope.parentProperty + ' and ' +

        $scope.childProperty

});

注意，还有其他内置指令(比如ng-include和ng-view)也会创建新的子作用域，这意味着它们在被调用时行为和ng-controller类似。

我们在构造自定义指令时也可以创建新的子作用域。