在AngularJS中，Dom操作应该在directive里进行，而不应该在controllers, services或者其他任何地方。

directives命名

• 使用不重复的前缀
  • 防止和其他人重复
  • 易读
• 不要用ng-作为你的directive的前缀
• 常见情况：两个单词
  • AngularUI project 用的是 “ui-“

什么时候用directives?

• 可复用的HTML控件
  <my-widget>

• 可复用的HTML行为
  <div ng-click="...">

• 包装一个jQuery插件
  <div ui-date></div>

• 你需要和DOM交互的绝大多数情况

创建一个directive

先给你的directive创建一个module

angular.module('MyDirectives',[]);

在你的app里加入directive module的依赖

angular.module('app',['MyDirectives']);

注册你的directive

angular.module('MyDirectives')
.directive('myDirective', function(){
  // TODO:
});

在HTML里使用你的directive

<div my-directive>...</div>

Restrict参数

‘A’

attributes
<div my-directive></div>

‘E’

element
<my-directive></my-directive

‘C’ ‘M’

rarely used
‘C’: classes ‘M’ : comments

组合

restrict: 'AE'

隔离的scope

directive默认是没有scope的，我们可以给它一个scope

scope: {
  someParam: '='
}

或者
scope: true
这个scope不会继承其他scope

scope参数

scope参数是从HTML的属性（attribute）传进来的

scope: {
  param1: '=', // 双向绑定（directive和controller）
  param2: '@', // 单向绑定
  param3: '&'  // 单向行为
}

<div my-directive
  param1="someVariable"
  param2="My name is {{name}}"
  param3="doSth()"
>