javascript 通过模型属性 angularjs 获取节点元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27600010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get node element by model property angularjs
提问by Mosh Feu
There is a way to get the input that binding a model's property.
有一种方法可以获取绑定模型属性的输入。
I want to do this to blur the search input after I send the form, and I want to do this dynamically for later changes in html source.
我想在发送表单后执行此操作以模糊搜索输入，并且我想动态执行此操作，以便以后更改 html 源代码。
Example:
例子：
var app = angular.module("MyApp", []);
app.controller('ctrl', function($scope) {
$scope.term = 'test';
$scope.submit = function(){
document.querySelector('#search').blur();
// I want replace document.querySelector('#search') with something like 'getElementByProp($scope.term)'
};
});<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-ng-controller="ctrl">
<form data-ng-submit="submit()">
<input id="search" type="search" data-ng-model="term" />
</form>
</div>
</body>
</html>回答by AlexCode
There's a fundamental error in your intention here.
您的意图存在根本性错误。
Please keep the following always in mind: The controller should know absolutely nothing about the DOM
请牢记以下几点： 控制器应该对 DOM 一无所知
This is a precious rule of thumb that will help you a lot.
这是一条宝贵的经验法则，会对您有很大帮助。
Now, of course you need to interact with the DOM from your javascript (AngularJS code), and for that you should use Directives.
现在，您当然需要通过 javascript（AngularJS 代码）与 DOM 进行交互，为此您应该使用指令。
In your case though I would use another approach:
在你的情况下，虽然我会使用另一种方法：
if (document.activeElement) {
document.activeElement.blur();
}
This will work for any focused elements and you won't need to specifically query any DOM element. So in theory you're not giving the controller any knowledge about the DOM, so for me this doesn't break the rule I mentioned above.
这适用于任何重点元素，您不需要专门查询任何 DOM 元素。所以理论上你没有给控制器任何关于 DOM 的知识，所以对我来说这并没有违反我上面提到的规则。
Just as a side note, $document for some reaon doesn't expose this activeElement. I don't have time to dig into the code to see why but as far as I've tested you need to stick with the native document object.
顺便提一下， $document 出于某种原因不会公开这个 activeElement。我没有时间深入研究代码以了解原因，但据我测试，您需要坚持使用本机文档对象。
回答by wrivas
An easy way to do this is using the jQuery little version that comes with AngularJS.
一个简单的方法是使用 AngularJS 附带的 jQuery 小版本。
Try this:
试试这个：
var element = angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]');
element.blur(); // element is a jQuery object
This should work
这应该工作
回答by Vincent
The reason this is not possible is that this is not something you'll usually want to do in Angular - you're most likely still "thinking like you're using jQuery". Please elaborate on why you want to manipulate the DOM yourself in the first place. Most likely it's a different problem that you can solve with e.g. a directive.
这是不可能的原因是这不是你通常想要在 Angular 中做的事情 - 你很可能仍然“像在使用 jQuery 一样思考”。请详细说明您首先要自己操作 DOM 的原因。很可能这是一个不同的问题，您可以使用例如指令来解决。
(This may sound like a lame answer, but "don't do this" very likely is the only correct way to handle this situation.)
（这可能听起来像一个蹩脚的答案，但“不要这样做”很可能是处理这种情况的唯一正确方法。）
