get node element by model property angularjs

Question

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.

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>

then you can use document.querySelector(): document.querySelector('[data-ng-model="term"]') — Rasalom
– Rasalom, Commented Dec 22, 2014 at 9:58
I know this. My question is not only for this scenario, but to know if there is option in angular itself. — Mosh Feu
– Mosh Feu, Commented Dec 22, 2014 at 10:02
hm. then I don't think there is an option except creating a directive and use element there. — Rasalom
– Rasalom, Commented Dec 22, 2014 at 10:05

AlexCode · Accepted Answer · 2014-12-25 21:33:49Z

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

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.

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.

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.

wrivas · Accepted Answer · 2018-08-14 21:33:13Z

4

An easy way to do this is using the jQuery little version that comes with AngularJS.

Try this:

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

This should work

edited Aug 14, 2018 at 21:33

answered Oct 6, 2015 at 19:48

wrivas

5096 silver badges12 bronze badges

1 Comment

rolinger Over a year ago

I tried this but it gives me error: Looking up elements via selectors is not supported by jqLite! But whats weird, is if I do: var el = document.getElementById(id); angular.element(el).on("click", function() { ... } ; MY real issue is that I am trying to retrieve <div id='divID'> that exists out side of <ion-content> - can't figure out how to get to it.

Vincent · Accepted Answer · 2014-12-24 11:22:21Z

2

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.

(This may sound like a lame answer, but "don't do this" very likely is the only correct way to handle this situation.)

answered Dec 24, 2014 at 11:22

Vincent

5,5057 gold badges48 silver badges63 bronze badges

2 Comments

Mosh Feu Over a year ago

The specific use is that when the form is submitted, the input field will no longer be in focus. To close the keyboard mobile devices. There is more uses..

Vincent Over a year ago

Ideally, this is not something that you would have to do yourself. Have you tested it? My mobile browser closes the keyboard by itself when I submit a form. Even still, this is not something you would want to be doing in the controller, as AlexCode says. You'd probably be making your own special input directive that handles this. However, you can feel it coming: you'd be starting to make custom directives for every form element to do something that you shouldn't have to implement yourself. I would check if there might be another reason the keyboard is not closed.

Collectives™ on Stack Overflow

get node element by model property angularjs

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related