javascript - 将数组传递给 Angular 指令

标签 javascript angularjs angularjs-directive

我有这个指令,当输入字段出现时将焦点设置在输入字段上,并在失去焦点或按下 esc/enter/tab 键时隐藏它。它工作得很好,但我想知道是否有一种方法可以传递键(和事件类型)的数组或对象,而不是将键和事件硬编码到指令本身中? 这是代码:

.directive('bindKeys', function ($timeout) {

    return {
        restrict: 'A',
        scope: {
            trigger: '='
        },

        link: function(scope, elem){

            elem.bind('keydown keypress blur', function (event) {
                    if(event.which === 13 || event.which === 9 || event.which === 27 || event.type === 'blur') {
                        event.preventDefault();
                        $timeout(function(){
                            scope.trigger.property = false;
                        });
                    }
                });
            scope.$watch('trigger.property', function(value) {

                if(value === true) {
                    $timeout(function() {
                        elem[0].focus();
                    });
                }
            });
        }
    };
});

该元素如下所示:

<input bindKeys trigger='trigger'></input>

谢谢

最佳答案

你当然可以。让某个模块提供您的数组

.value('events', ['blur', 'keypress'])

然后让它们注入(inject)到您的指令中(事件变量名称必须与上面的键匹配)。

.directive('bindKeys', function ($timeout, events) {
    // ...
    element.bind(events.join(' '), function() {})
}

注入(inject)数组的替代语法是显式定义变量名称

.directive('bindKeys', ['$timeout', 'events', function ($timeout, events) {})

在此处查看有关依赖注入(inject)的更多信息: https://docs.angularjs.org/guide/di

以及此处的模块: https://docs.angularjs.org/guide/module

关于javascript - 将数组传递给 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28908115/

相关文章:

javascript - onkeydown 与 jquery 和 javascript 功能

javascript - 在重新启动计时器之前显示 Div 一段时间

javascript - 在 AngularJS 中为 ng-keyup 添加延迟

javascript - Angular ng-click 事件未触发

AngularJS - 根据单选按钮值有条件地应用所需的属性

javascript - 如何向模板外部的组件添加 Prop

javascript - 使用 Lodash 将字符串数组转换为对象数组

angularjs - 如何在 AngularJs 中设置全局 http 超时

javascript - 指令采用同一实例的范围

javascript - 带有 require 的父指令 Controller 上的 Angular 监视