Question

有一种方法可以获得绑定模型属性的输入。

我想在发送表单后模糊搜索输入，我想动态地执行此操作以便以后更改html源代码。

示例：

＆＃13;

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)'
  };
});

＆＃13;

<!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>

＆＃13;

Answer 1

这里的意图存在根本性错误。

请始终牢记以下内容： 控制器应该完全不了解DOM

这是一个宝贵的经验法则，可以帮助你很多。

现在，您当然需要通过javascript（AngularJS代码）与DOM进行交互，为此您应该使用Directives。

在你的情况下，我会使用另一种方法：

if (document.activeElement) {
  document.activeElement.blur();
}

这适用于任何有针对性的元素，您不需要专门查询任何DOM元素。所以从理论上讲，你并没有给控制器任何关于DOM的知识，所以对我而言，这并没有违反我上面提到的规则。

正如旁注所示，某些原因的$ document并未公开此activeElement。我没有时间深入研究代码以了解原因，但据我测试，您需要坚持使用本机文档对象。

Answer 2

一种简单的方法是使用AngularJS附带的jQuery小版本。

试试这个：

var element = angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]');
element.blur(); // element is a jQuery object

这应该有效

Answer 3

这是不可能的原因是这不是你通常想要在Angular中做的事情 - 你很可能仍然＆＃34;认为你正在使用jQuery＆＃34 ;。请详细说明您为什么要首先自己操作DOM。最有可能的是，您可以通过以下方式解决不同的问题：指令。

（这可能听起来像是一个蹩脚的答案，但是＆＃34;不要这样做＆＃34;很可能是解决这种情况的唯一正确方法。）

通过模型属性angularjs获取节点元素

3 个答案: