directive
参数传递和绑定方式： scope定义，如：
scope: {
data: "="
},
参数调用方式：
在定义的link函数里，通过scope.data调用，在模板里，直接用变量名调用，比如data。
变量绑定和变化监听
模板里有需要显示异步变量内容相关的dom，在获取到值之后都会正常展现出来。
directive的逻辑主要在link函数里面，link函数执行时，还不能立刻获取到绑定的延时变量的最终值
，所以如果在link里面直操作作这些变量时，比如根据变量的值来动态设置dom样式的操作，无法生效，需要定义scope.$watch来监听变量的变化，然后触发相应的操作。
=适合绑定对象形式的复杂参数，比如数组，字典。
@适用于绑定字符串变量或常量。
1、对于@形式的字符串变量，如果在父控制器里修改，会直接反应到view上（不论是direc的视图，还是父控制器里的视图），如果在link里修改，则不会生效，在link里面用$watch监控变量的值没有变化。
2、对于=形式的变量，则在父控制器，和link里面修改变量的值，都会生效，并反应在视图上（不论是direc的视图，还是父控制器里的视图），也可以在link里用$watch监控到变量的变化动作，然后添加自定义的逻辑。
关于$watch，directive监听变量的变化，触发进一步的动作，如果只是变量的改变和显示，无需手动监听，如果需要触发更复杂的逻辑，比如监听变量的变化，触发echart的绘图函数，则需要添加手动监听函数，调用$watch方法，变量是对象时，需要监听对象内容的变化，添加true参数。
scope.$watch('data', (newValue, oldValue) => {
drawLine();
}, true);
component
参数传递和绑定方式：
bindings声明，如：
bindings: {
data: '<'
}
参数调用方式：
在js的controller里通过this.data可以调用到，在模板里可以通过$ctrl.data调用到，'$ctrl'是模板里conroller默认的名称，如果在定义component的时候定义了'controllerAs'声明，则需要按自定义的名称来调用，比如vm.data。
变量绑定和变化监听
模板里有需要显示异步变量内容相关的dom，在获取到值之后都会正常展现出来。
controller的函数体里面主要是定义函数，这里不能立刻获取到绑定的延时变量的最终值，组件真正的行为应该定义在这里以函数形式定义，不建议直接将动作逻辑写在定义函数里让其在构建的过程中执行，建议用component的life circle相关的函数来定义，如：
1、$.onInit()，自定义绑定事件
2、$.onChanges()，异步变量的值取到的时候，触发的动作逻辑在这里被调用执行
3、$.onDestroy()，解绑自定义事件，对应$onInit()
4、=和<适合绑定对象形式的复杂参数，比如数组，字典
5、@适用于绑定字符串变量或常量
6、=和direc一致，在当前作用域和父作用域里修改变量，都会反馈在当前作用域和父作用域的视图里面
7、<，在父作用域里修改变量的值，会同时反映在父作用域和当前作用域的视图里，但是在子作用域里修改变量的值，只会反映在子作用域的视图上，不反应在父作用域的视图。
采用$onChanges()函数，这个监听函数，默认也是监听的对象的引用的值的变化，对象内容的变化不会触发onChanges函数。
作者：七宝琥珀
链接：http://www.jianshu.com/p/f5675fd5c441
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。