AngularJs指令link绑定事件

angularjs的link绑定DOM事件，以下通过一个双击变成可编辑菜单，来展示各个事件。

html

<div edit></div>

javascribe

app.directive('edit', edit);

    function edit() {
        return {
            restrict: 'A',
            template: '<div>Hi everyone!</div>',
            replace: true,
            link: function (scope, element, attrs, ctrl) {
                element.text(scope.myCtrl.resume);
                attrs.$set('contenteditable', false);

                element.bind('click', function (event) {
                    console.log('单机')
                });

                element.bind('dblclick', function () {
                    if (!attrs.contenteditable) {
                        console.log('双击！')
                        attrs.$set('contenteditable', 'plaintext-only');    // 设置可被编辑
                        element[0].focus();
                    }
                });

                element.bind('blur', function () {
                    console.log('失去焦点.')
                });

                /*
                  完整的 key press 过程分为两个部分：
                  1. 按键被按下；
                  2. 按键被松开。
                */
                element.bind('keydown', function (event) {
                    console.log('键盘按下..')
                });

                element.bind('keyup', function (event) {
                    console.log('键盘松开..')
                })
            }
        }
    }

在线运行