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/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>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./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>- you want to select element by model name, or model value? – Rasalom Commented Dec 22, 2014 at 9:53
- model name (the name of the property) – Mosh Feu Commented Dec 22, 2014 at 9:55
-
1
then you can use
document.querySelector():document.querySelector('[data-ng-model="term"]')– 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 Commented Dec 22, 2014 at 10:02
-
hm. then I don't think there is an option except creating a directive and use
elementthere. – Rasalom Commented Dec 22, 2014 at 10:05
3 Answers
Reset to default 6There'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.
An easy way to do this is using the jQuery little version that es with AngularJS.
Try this:
var element = angular.element('[ng-model="YOUR_MODEL_NAME_HERE"]');
element.blur(); // element is a jQuery object
This should work
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.)