开发初期，API未准备好时，会采用静态参数传递，来调试组件功能，通常没啥问题，但是当调整为从后端API异步获取数据后，就很容易出现找不到数据的问题。
例如，写一个组件，接受若干参数，然后在其他页面里调用这个组件，但传给组件的参数是一个变量，开始并没有值，需要从后台API获取数据，这样页面加载出来的时候，组件的template被画出来了，但它接受到的参数是未定义，比如在 页面里这样调用dirc：<lucky-number num="vm.cumulativePowerHours"></lucky-number>，这个num参数是需要在js里从后台获取的，这时候就需要去理解组件的参数传递和变化监听相关的规则，下面笔者分别针对directive和component进行分析和阐述，分享给有需要的人，有不正之处，请不吝赐教。
-
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://stackoverflow.com/questions/35604919/angular-1-5-component-onchanges-is-not-working
reference:
https://docs.angularjs.org/guide/directive
https://docs.angularjs.org/guide/component
网友评论