1.背景介绍

What： 指令是扩展扩展具有自定义功能的HTML元素的途径。比如为 DOM 元素调用方法、定义行为绑定数据等。本质上是在HTML中通过元素、属性、类或注释来添加功能

Why： 最大程度减少DOM操作，实现数据绑定，与业务逻辑进行交互。

How： 指令主要分为两种：内置指令和自定义指令。假设我们已经创建了一个完整的HTML文档，其中包含了AngularJS，并且DOM中已经用ng-app指令标识出了应用的根元素，当AngularJS编译HTML时就会调用指令。

2.知识剖析

自定义指令

喵咕咕

内置指令

下面都是angular指令的合法格式

内置指令

angular自带的指令，有60+

AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如 form 和 a 标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令。

例如， form 标签被从底层扩展了一系列高级功能，包括表单验证等，原生HTML表单并不会提供这些功能。其他内置指令通常以ng为前缀，很容易识别。

所有以ng前缀开头作为命名空间的指令都是AngularJS提供的内置指令，因此不要把你自己开发的指令以这个前缀命名。

自定义指令

通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，指令名应该是驼峰命名风格的，函数应该返回一个对象,包含了用来定义和配置指令所需的方法和属性。 

restrict属性有4个值元素（E） 、属性（A） 、类（C）或注释（M）用以制定格式来调用，可以有不止一种格式，比如 restrict: 'EAC'

replace的值决定它的模板是嵌套入标签中还是取而代之，若replace值为true，则会替换调用的标签，显示的为

                        Click me to go to Google

否则默认情况下，值为false， AngularJS将模板生成的HTML代码嵌套在调用标签的内部，如下显示

                            Click me to go to Google

指令的基础参数

var mainDirectives = angular.module('mainDirectives',[])

.directive('jobfocus1',function () {

    return {

            restrict: 'AE',  //调用方式

            replace: true,   //调用时是否替换调用标签，还是在嵌入内部

            templateUrl: '../tpls/focus/jobcarot2.html',  //模板路径

            scope: {},      //是否生成独立作用域

            controller: function ($scope, $element, $attrs, $transclude) {

                        共用的方法，参数

                        如果存在多个指令交互，这个就可以作为主指令，其他指令需要操作到的函数或方法就在这里调用，

                        也就在link函数的supermanCtrl参数中调用

                        }

            link:function (scope, ele, attrs,supermanCtrl){

                函数参数：

                        scope：当前作用域对象

                         ele：当前元素

                        attrs：当前元素的属性

                        supermanCtrl：是否存在

              指令逻辑，在这里操作dome，

            }

        }

    })

3.常见问题

如何创建自定义指令

4.解决方案

restrict值

A作为属性使用????C作为类名使用

M作为注释使用????E作为元素名使用

template参数:两种形式

HTML文本形式

函数形式

                js部分：

                angular.module('app',[])

                    .directive('myDirective', function () {

                        return {

                            restrict: 'E',

                            template: function (elem, attr) {

                        return "" + attr.text + "";

                     }

                };

            })

            html部分:

templateUrl参数

文本形式

                    angular.module('app',[])

                        .directive('myDirective', function () {

                            return {

                                restrict: 'AEC',

                                templateUrl: 'js/directives/searchParams/search-params.html',

                        };

                    })

函数形式

                angular.module('app',[])

                    .directive('myDirective', function () {

                        return {

                            restrict: 'AEC',

                            templateUrl: function (elem, attr) {

                                return attr.value + ".html";  //当然这里我们可以直接指定路径，同时在模板中可以包含表达式

                            }

                        };

                    })

scope参数

scope参数是可选的，可以被设置为true或一个对象。默认值是false。

当为true时：继承并隔离，父子作用域互相影响

当为false时：继承但是不隔离，也就是说子作用域改变并不会影响父作用域

当为{}时：隔离且不继承

controller参数

controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.

                    angular.module('myApp', [])

                        .directive('myDirective', function() {

                                restrict: 'A',

                                controller: 'SomeController'

                        })

可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器

                    angular.module('myApp',[])

                        .directive('myDirective', function() {

                            restrict: 'A',

                            controller:

                                function($scope, $element, $attrs, $transclude) {

                                        // 控制器逻辑放在这里

                            }

                        });

5.编码实战

6.扩展思考

scope作用域传参相关

7.参考文献

CODING博客

博客园

8.更多讨论

现在是提问讨论时间

https://v.qq.com/x/page/m0501ffkwmn.html

https://ptteng.github.io/PPT/PPT/js-07-angulardirective.html#/