指令link绑定事件大全 - angularjs

無名 发表于: 2019-05-02   最后更新时间: 2019-05-02  

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


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: AngularJS图片img中src和ng-src的区别
下一条: angularjs后台获取初始化ztree数据