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

get node element by model property angularjs

本文关键字：获取 节点 元素 AngularJS 属性 模型      更新时间：2023-09-26

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

我想这样做是为了在发送表单后模糊搜索输入，我想动态执行此操作，以便以后在 html 源代码中进行更改。

例： 

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>

你的意图在这里有一个根本错误。

请始终牢记以下几点：控制器应该对 DOM 一无所知

这是一个宝贵的经验法则，会对您有很大帮助。

现在，当然你需要从你的javascript(AngularJS代码(与DOM进行交互，为此你应该使用指令。

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

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

这将适用于任何聚焦元素，您无需专门查询任何 DOM 元素。所以从理论上讲，你没有给控制器任何关于DOM的知识，所以对我来说，这并没有违反我上面提到的规则。

作为旁注，对于某些reaon来说，$document不会暴露这个activeElement。我没有时间深入研究代码以了解原因，但就我测试而言，您需要坚持使用本机文档对象。

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

试试这个： 

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

这应该有效

这是不可能的原因是这不是你通常想在 Angular 中做的事情 - 你很可能仍然"像你在使用 jQuery 一样思考"。请详细说明为什么您首先要自己操作 DOM。最有可能的是，这是一个不同的问题，你可以用例如指令来解决。

(这听起来像是一个蹩脚的答案，但"不要这样做"很可能是处理这种情况的唯一正确方法。

相关文章：