angularJs 指令重新学习

AngularJs使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive.

接下来详细看看指令的参数如何使用：

angular.module('app', [])
.directive('myDirective', function() {
    return {
    restrict: String,                
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
    function(tElement, tAttrs) {...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or
    function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数，如下所示：
    function(tElement, tAttrs, transclude) {
        return {
            pre: function(scope, iElement, iAttrs, controller) { ... },
            post: function(scope, iElement, iAttrs, controller) { ... }
           }
        return function postLink(...) { ... }
        }
    };
 });

内部参数

restrict：String，E（元素）<my-directive></my-directive> A（属性，默认值）<div my-directive="expression"></div> C（类名）<div class="my-directive:expression;"></div> M（注释）<--directive:my-directive expression-->
priority: Number，指令执行优先级
template: String，指令链接DOM模板，例如“<h1>{{head}}</h1>”
templateUrl:String，DOM模板路径
replace: Boolean，指令链接模板是否替换原有元素。

对外参数——scope

scope参数非常重要，本应该是放到最后说明的，但是scope却是理解其他参数的关键，所以务必先跟大家说清楚。

scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

scope参数是可选的，默认值为false，可选true、对象{}；

false：共享父域
true：继承父域，且新建独立作用域
对象{}：不继承父域，且新建独立作用域

false:

本质：子域与父域共享作用域。

特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。反之修改指令内部时，父域也刷新。

true:

本质：子域继承父域，并建立独立作用域。

特点：

1、在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。反之，指令中parentName变更，父域也不会发生变化。

2、在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新

这种情况很多时候会被忽略，指令的scope没有声明对象时，其元素绑定的仍然是父域的对象。但，一旦指令中Input变更了，对应的独立scope也会自动声明该绑定对象，这就回到了第1种情况。

3、在指令已声明parentName的情况下，在指令中监听父域parentName 的变化无效。但监听子域parentName的变化有效
独立子域scope，只能监听自己的，不能监听父域的。但通过 $scope.$parent可以监听父域。

4、在指令未声明parentName的情况下，在指令中监听父域parentName的变化有效。

这里就不解释了，参考第2点，大家可以动手试一下。

对象{}参数:

本质：子域不继承父域，并建立独立作用域。
特点：

1、当scope对象为空对象时，无论是父域parentName，还是指令子域parentName发生变更，都不会影响到对方。
原理很清楚，就是指令建立的独立作用域，与父域是完全隔离的

2、当scope对象为非空对象时，指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务，就是可以通过这块扩展属性完成。

@（or @Attr）绑定策略——本地作用域属性，使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。（单向引用父域对象）.

ps：@ 是单向绑定本地作用域，记得加上{{}}

= （or =Attr）绑定策略——双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。（双向引用父域对象）

ps：=策略不需要加上{{}}进行绑定

& （or &Attr）绑定策略——通过&符号可以对父级作用域进行绑定，以便在其中运行函数。（调用父域函数）

ps：&对应的attrName必须以on-开头

文章学习主要来源： https://segmentfault.com/a/1190000003937942