将数组传递给 angular 指令
Pass an array to angular 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'])
然后让它们注入你的指令(事件变量名称必须与上面的键匹配)。
.directive('bindKeys', function ($timeout, events) {
// ...
element.bind(events.join(' '), function() {})
}
注入数组的另一种语法是显式定义 vars 的名称
.directive('bindKeys', ['$timeout', 'events', function ($timeout, events) {})
在此处查看有关依赖注入的更多信息:
https://docs.angularjs.org/guide/di
我有这个指令,它在输入字段出现时将焦点设置在输入字段上,并在它失去焦点或按下 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'])
然后让它们注入你的指令(事件变量名称必须与上面的键匹配)。
.directive('bindKeys', function ($timeout, events) {
// ...
element.bind(events.join(' '), function() {})
}
注入数组的另一种语法是显式定义 vars 的名称
.directive('bindKeys', ['$timeout', 'events', function ($timeout, events) {})
在此处查看有关依赖注入的更多信息: https://docs.angularjs.org/guide/di