AngularJs指令link绑定事件

無名 发表于: 2019-05-02   最后更新时间: 2023-04-18 20:09:17  
{{totalSubscript}} 订阅, 2,794 游览

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('键盘松开..')
                })
            }
        }
    }

在线运行

更新于 2023-04-18

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章