越来越咸，两个月没发文章了，刚刚换项目了，开始学一些新的知识。
近来调试 webhook 和 http callback 比较多，想要使用 Node.js 写一个接收所有 HTTP 请求，并把请求头和请求体写进log，返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子，优化了可读性，时间、method、path、URL参数（Query）、请求头（Header）、请求体（Body）都详细记录了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

info: 2019-07-25 18:04:36
    POST /v1.0/standard
    Query:
        search: keyword
    Header:
        cache-control: no-cache
        postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
        content-type: application/json
        user-agent: PostmanRuntime/3.0.11-hotfix.2
        accept: */*
        host: localhost:4000
        accept-encoding: gzip, deflate
        content-length: 209
        connection: keep-alive
    Body:
        appId: XXX
        data:
            userId: 123
            requestId: 456
        timestamp: 0

如果我们想要给directive的scope中绑定的方法传递参数，需要传递对象，而不是直接传值。

举个栗子，这里的clickOutside是从用的地方传入的一个方法，debug时我们会发现绑进来的clickOutside并不是我们传的clickOutSideAction。

1
2
3
4
5
6
7
8
9
10
11
12
13

app.directive('clickOutSide', ['$document', function($document) {
    return {
        restrict: 'A',
        scope: {
            clickOutside: '&'
        },
        link: function (scope, el) {
            $document.on('click', function (e) {
                scope.clickOutside();
            });
        }
    }
}]);

1

<div data-click-out-side click-Outside="$ctrl.clickOutSideAction()"></div>

如果需要在这里给clickOutSideAction传参数，应该这样改：

1
2
3
4
5
6
7
8
9
10

app.directive('clickOutSide', ['$document', function($document) {
    return {
        ...
        link: function (scope, el) {
            ...
                scope.clickOutside({event: e});
            ...
        }
    }
}]);

1

<div data-click-out-side click-Outside="$ctrl.clickOutSideAction(event)"></div>

好处是在实际使用directive的地方，不需要考虑参数列表顺序，只需要保证参数名称正确。

在Gist上找到的一个directive，用来让input输入框的宽度自适应内容宽度。
https://gist.github.com/mbenford/8016984

原理是生成一个相同样式的，隐藏的span，通过span的宽度动态改变input的宽度。
同时兼顾了input有placeholder的情况。

如果是在比较大的系统中，可以用throttle节流阀包装一下resize方法，避免性能问题。

如果是textarea，对应的directive在这里：
https://github.com/monospaced/angular-elastic

点击一个按钮后需要弹出一个对话气泡，气泡内有各种设置项，点击外侧可以退出。

现在的效果：

在线测试：https://codepen.io/iMaeGoo/pen/KYVRGL

由于公司不能安装梯子，所以不能访问谷歌商店，平时频繁地要访问国外的AngularJS网站，比如AgGrid，AngularJS Material，AngularJS官网等，很多用了Google的CDN源，页面就无法正常加载。

一开始的思路是改host文件，但是我们没有Google CDN的证书，会造成证书错误。

参考并优化了：https://github.com/justjavac/ReplaceGoogleCDN ，动手写了一个Chrome插件，对所有特定请求重定向，解决痛点！

I’m using AngularJS Material v1.1.1.
I’m finding a way to use simple <md-chip> without <md-chips>.

Here is an easy way in Vue Material: https://codesandbox.io/s/lyoqv4l0z?module=App.vue

1

<md-chip class="md-primary" md-deletable>Deletable</md-chip>

But I can not find the similiar way in AngularJS Material document.
https://material.angularjs.org/latest/api/directive/mdChip

Angular version: 1.6.6
在HTML中想使用$rootScope中的变量时发现取不到，加上$root之后解决。

在Chart options中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 给图例加手势
legend: {
  onHover: function(e) {
      e.target.style.cursor = 'pointer';
  }
},

// 给图加手势
hover: {
  onHover: function(e) {
      var point = this.getElementAtEvent(e);
      if (point.length) {
        e.target.style.cursor = 'pointer';
      } else {
        e.target.style.cursor = 'default';
      }
  }
}