在ng-click里面的jQuery传递html元素引用 [英] jQuery inside ng-click to pass html element reference
问题描述
注意：与上述内容不重复。以上是访问点击元素，这个问题是关于访问其他元素。
NOTE: Not a duplicate of above. Above is accessing clicked element, this question is about accessing a different element.
问题
如何在html文档中将元素（不是点击的元素）传递给 ng-click 中的Angular范围方法？
How can I pass an element (not the clicked element) from my html document to an Angular scope method in an ng-click?
示例： http://jsfiddle.net/Ld8Zs/2/
HTML：
<body ng-app="myApp">
<div ng-controller="myController">
<input type='text'></input>
<button ng-click="clickHandler($('input'));">One</button>
<button onclick="alert(typeof $('input'));">Two</button>
</div>
</body>
JavaScript：
JavaScript:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.clickHandler = function(el) {
alert(typeof el);
// real code work with element---set focus
}
});
在此示例中，当您单击第二个按钮时，使用 onclick 你得到对象。当您点击通过 ng-click 的第一个按钮时，您将获得未定义。
In this example when you click the second button, which uses onclick you get "object". When you click on the first button which passes through ng-click you get "undefined".
我是试图避免将jQuery代码本身移动到控制器或一般用于Angular以保持可测试性。
I'm trying to avoid moving the jQuery code itself into the controller or into Angular in general to maintain testability.
编辑：
我的原始示例使用jQuery查找第一个< button> 元素，该元素可由 $ event <轻松处理/ code>。这实际上并不表示我想要解决的问题，而是将我的实际问题翻译成简单的可重现的错误。
My original example used jQuery to find the first <button> element which is easily handled by $event. This is not actually indicative of the problem I want to solve and was my mistake in translating my actual problem to a simple reproducible.
链接的副本不是同一个问题。
The linked duplicates are not the same problem.
推荐答案
jQuery选择器不是有效的角度表达式，但它清楚地告诉我你要做什么。
jQuery selectors are not valid angular expressions, but its clear to me what you're trying to do.
我能想到的唯一方法是分配输入范围内的元素：
The only way I can think of to do this is to assign the input element on scope:
HTML：
<body ng-app="myApp">
<div ng-controller="myController">
<input type='text'></input>
<button ng-click="clickHandler(input);">One</button>
<button onclick="alert(typeof $('input'));">Two</button>
</div>
</body>
JavaScript：
JavaScript:
var app = angular.module('myApp', []);
app.controller('myController', function($scope, $element) {
$scope.input = $('input', $element);
$scope.clickHandler = function(el) {
alert(typeof el);
}
});
更好的选择
我不确定为什么要将视图元素传递给点击处理程序。也许有一种更好的方式 - 例如;传递输入元素绑定的模型。
I am not sure why one would want to pass a view element to a click handler. Perhaps there is a better way - e.g.; pass the model that the input element is bound to instead.
HTML：
<body ng-app="myApp">
<div ng-controller="myController">
<input type='text' ng-model="name"></input>
<button ng-click="clickHandler(name);">One</button>
</div>
</body>
JavaScript：
JavaScript:
app.controller('myController', function($scope, $element) {
$scope.name = 'John';
$scope.clickHandler = function(model) {
if (model == 'Tim') {
alert("No!!! You're John!");
$scope.name = 'John';
}
}
});
通过传递模型，并操纵绑定到输入的模型，视图（输入元素）自动更新。这更有棱角，更少jquery。
By passing the model, and manipulating the model that's bound to the input, the view (input element) is updated automatically. That is more angular, and less jquery.
这篇关于在ng-click里面的jQuery传递html元素引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
