Passing This Parameter In AngularJS

Question

How do I pass the html element through my function when using AngularJS. This would work if you don't use AngularJS, but I think AngularJS confuses the "this" keyword with some other parent. How would I get this code to work?

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.MyFunction = function(element) {
    alert(element.value);
    element.focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-click="MyFunction(this)" value="Hello">
</div>

This will not work. You need to write the directive to set focus on input. — Kaustubh Khare
– Kaustubh Khare, Commented Apr 11, 2018 at 5:23
You have all the html element in your link function within the element param already. — Guillaume Roche-Bayard
– Guillaume Roche-Bayard, Commented Apr 11, 2018 at 7:56

Umer Farooqui · Accepted Answer · 2018-04-11 05:58:07Z

2

I think you are looking for this.

<input ng-click="MyFunction($event)" value="Hello">

  // while in your controller

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.MyFunction = function($event) {

  //reference to the DOM element triggered the function
   var element =   $event.target;   
    element.focus();
  }
});

BUT ITS NOT GOOD PRACTICE TO DO IT THIS WAY IN ANGULAR JS

answered Apr 11, 2018 at 5:58

Umer Farooqui

3072 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frank Over a year ago

Would you mind explaining why this isn't good practice please? Because this solves my problem perfectly

Umer Farooqui Over a year ago

look here, it explains well. link and if you want to use them directives are the best: here

manish · Accepted Answer · 2018-04-11 05:30:21Z

1

you can use ng-model for assigning values to element and that's 2 way binding :)

    angular.module('myApp', []).controller('myCtrl', function($scope) {
      $scope.theValue = "Hello";
      $scope.MyFunction = function(value) {
        alert('Passed Value : ' + value  + ' Model Value : ' + $scope.theValue);
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input ng-model="theValue" ng-blur="MyFunction(theValue)">
</div>

edited Apr 11, 2018 at 5:30

answered Apr 11, 2018 at 5:24

manish

1,4588 silver badges13 bronze badges

1 Comment

Frank Over a year ago

Yes I know about ng-model but you can't do something like element.focus() with ng-model. So ng-model doesn't solve my problem here

Hanif · Accepted Answer · 2018-04-11 05:38:00Z

0

In angular you can't work this way, try with event.target. You should try following way:

    <input ng-click="MyFunction()" value="Hello">

    angular.module('myApp', []).controller('myCtrl', function($scope) {
      $scope.MyFunction = function() {
        alert($(event.target).attr('value'));
        $(event.target).focus();
      }
    });

answered Apr 11, 2018 at 5:38

Hanif

3,8451 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

Passing This Parameter In AngularJS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related