AngularJS: directive

Directives in AngularJS

AngularJS Tutorial: Demystifying Custom Directives

Mastering the Scope of the Directives in AngularJS

Angular 1.x Directive Definition Object: require property

AngularJS Custom-Directives controllers, require option guide

Angular directive replace=true

驼峰命名（Camel Case）:

.directive('symptomTags', function symptomTags() {......});

使用自定义的directive：

注意：根据驼峰的名分拆分单词，并且使用"-"连接，要注意这个坑
<symptom-tags></symptom-tags>

restrict

用来设置 directive 的 type: element attribute class ...

The restrict option is typically set to:
'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches comment

These restrictions can all be combined as needed:
'AEC' - matches either attribute or element or class name

scope

实际上就是起到 map 的作用，可以理解成 map 对象。

Isolating the scope of a directive to reuse such a directive.

@ or @attr
= or =attr
< or <attr
& or &attr

代码中有时会出现问号，比如 &? @?，什么意思呢？
scope: {
  // same as '=customer'
  customer: '='
  // =? 也表示上面的意思
  customer: '=?'
},
The attribute name is the same as the value you want to bind to inside the directive's scope, you can use the above shorthand syntax.

Note that if the directive did not create its own scope, scope: {...}, then scope would reference the outside scope.

link:

DOM Manipulation

Directives that want to modify the DOM typically use the link option to register DOM listeners as well as update the DOM.

It is executed after the template has been cloned and is where directive logic will be put.

function link(scope, element, attrs, controller, transcludeFn) { ... }, 

Best Practice:
Use controller when you want to expose an API to other directives. Otherwise use link.

controller

用于定义和指令模版关联的控制器。
定义与其他指令进行交互的接口函数.

require

Directives Communication
You can compose any directives by using them within templates. Sometimes, you want a component that's built from a combination of directives.

When a directive requires a controller, it receives that controller as the fourth argument of its link function.

require: ['^^myTabs', 'ngModel'],
......
link: function(scope, element, attrs, controllers) {
    var tabsCtrl = controllers[0],
        modelCtrl = controllers[1];
}

The basic difference is that controller can expose an API, and link functions can interact with controllers using require.

template

定义指令的输出内容。可以包含 HTML 、数据绑定表达式，甚至是其它指令。

templateUrl

提供指令所用模版的路径。如果模版被定义在 <script> 内，那它可以包含一个 DOM 元素的 id 。

transclude

only use transclude: true when you want to create a directive that wraps arbitrary content.

replace

replace: true 网页源代码显示如下：
<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

replace: false 网页源代码显示如下：
<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

区别就是代码运行中, directive 要不要再网页源码中显示出来。然道隐藏细节，嘻嘻。