我正在使用AngularJS,我有一個輸入文本框和兩個使用該輸入去按不同URL的按鈕。現在,我正在使用ng-click。這適用於點擊按鈕,但如果我選擇按鈕並按enter
,則什麼也不會發生。如何使點擊或輸入鍵可以使用AngularJS鏈接
其他結果在線建議使用ng-submit,但這是表單的屬性而不是按鈕(我認爲),所以它不能用於兩個按鈕。
有關如何使用鼠標和Tab鍵並按Enter鍵的任何建議?
謝謝!
我正在使用AngularJS,我有一個輸入文本框和兩個使用該輸入去按不同URL的按鈕。現在,我正在使用ng-click。這適用於點擊按鈕,但如果我選擇按鈕並按enter
,則什麼也不會發生。如何使點擊或輸入鍵可以使用AngularJS鏈接
其他結果在線建議使用ng-submit,但這是表單的屬性而不是按鈕(我認爲),所以它不能用於兩個按鈕。
有關如何使用鼠標和Tab鍵並按Enter鍵的任何建議?
謝謝!
從源頭上看,它看起來像你也可以使用ng-keyup,並檢查它是否是一個輸入然後做你的生意,但我認爲寫一個自定義指令,所以你不必做所有額外的工作視圖定義仍然會使事情變得更容易。
下面是源NG點擊等
/**
* @ngdoc directive
* @name ng.directive:ngClick
*
* @description
* The ngClick allows you to specify custom behavior when
* element is clicked.
*
* @element ANY
* @param {expression} ngClick {@link guide/expression Expression} to evaluate upon
* click. (Event object is available as `$event`)
*
* @example
<doc:example>
<doc:source>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
count: {{count}}
</doc:source>
<doc:scenario>
it('should check ng-click', function() {
expect(binding('count')).toBe('0');
element('.doc-example-live :button').click();
expect(binding('count')).toBe('1');
});
</doc:scenario>
</doc:example>
*/
/*
* A directive that allows creation of custom onclick handlers that are defined as angular
* expressions and are compiled and executed within the current scope.
*
* Events that are handled via these handler are always configured not to propagate further.
*/
var ngEventDirectives = {};
forEach(
'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress'.split(' '),
function(name) {
var directiveName = directiveNormalize('ng-' + name);
ngEventDirectives[directiveName] = ['$parse', function($parse) {
return function(scope, element, attr) {
var fn = $parse(attr[directiveName]);
element.bind(lowercase(name), function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
});
});
};
}];
}
);
http://code.angularjs.org/1.1.5/angular.js
制定了基於上面的代碼雅小提琴:
的JavaScript
angular.module("myApp", []).directive("actionDirective", ['$parse', function($parse) {
return function(scope, element, attr) {
//grabbing the function from the attributes and parsing it (to get parameters I believe, this taken from the code above.
var fn = $parse(attr['actionDirective']);
//making the handler so it can be bound to different events without repeating again taken from source above
var handler = function(event) {
scope.$apply(function() {
fn(scope, {$event:event});
}
)};
//If clicked calling the handler
element.bind('click', handler);
//Checking first that it's the enter key "13" then calling the handler
element.bind('keyup', function(event) { if(event.keyCode==13) handler(event)});
}
}]).controller("MyCtrl", function($scope){
$scope.somethingHappened = function() {
alert("something happened");
}
});
的HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<button action-directive="somethingHappened()">Test</button>
</div>
在一如既往這樣瞭解了一些。 Chrome和Firefox(至少在Ubuntu上)似乎將空格作爲點擊事件發生,這似乎也適用於Chrome而不是Firefox。只是認爲這是一種有趣的小差異,很驚訝地看到空格鍵並輸入鍵記錄爲鼠標點擊事件。
聽起來像一個自定義指令(da daa da daa)的工作。你應該能夠寫出一個指令,在這個指令中你綁定了你感興趣的元素並且你調用了一些函數(這就是你新的「屬性/屬性」的「值」) – shaunhusain