jQuery inside ng-click to pass html element reference

Question

NOTE: Not a duplicate of above. Above is accessing clicked element, this question is about accessing a different element.

QUESTION

How can I pass an element (not the clicked element) from my html document to an Angular scope method in an ng-click?

Example: http://jsfiddle.net/Ld8Zs/2/

HTML:

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text'></input>
    <button ng-click="clickHandler($('input'));">One</button>
    <button onclick="alert(typeof $('input'));">Two</button>
  </div>  
</body>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
    $scope.clickHandler = function(el) {
        alert(typeof el);
        // real code work with element---set focus
    }
});

In this example when you click the second button, which uses onclick you get "object". When you click on the first button which passes through ng-click you get "undefined".

I'm trying to avoid moving the jQuery code itself into the controller or into Angular in general to maintain testability.

EDIT:

My original example used jQuery to find the first <button> element which is easily handled by $event. This is not actually indicative of the problem I want to solve and was my mistake in translating my actual problem to a simple reproducible.

The linked duplicates are not the same problem.

Possible dup: stackoverflow.com/questions/12430820/…

V31
– V31

2014-07-06 04:33:07 +00:00
Commented Jul 6, 2014 at 4:33 — V31
– V31, Commented Jul 6, 2014 at 4:33

Leopoldo Sanczyk · Accepted Answer · 2016-10-14 05:43:05Z

jQuery selectors are not valid angular expressions, but its clear to me what you're trying to do.

The only way I can think of to do this is to assign the input element on scope:

HTML:

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text'></input>
    <button ng-click="clickHandler(input);">One</button>
    <button onclick="alert(typeof $('input'));">Two</button>
  </div>  
</body>

JavaScript:

var app = angular.module('myApp', []);

app.controller('myController', function($scope, $element) {
    $scope.input = $('input', $element);

    $scope.clickHandler = function(el) {
        alert(typeof el);
    }
});

Demo FIDDLE

[EDIT]

Better Alternative

I am not sure why one would want to pass a view element to a click handler. Perhaps there is a better way - e.g.; pass the model that the input element is bound to instead.

HTML:

<body ng-app="myApp">
  <div ng-controller="myController">
    <input type='text' ng-model="name"></input>
    <button ng-click="clickHandler(name);">One</button>
  </div>  
</body>

JavaScript:

app.controller('myController', function($scope, $element) {
    $scope.name = 'John';

    $scope.clickHandler = function(model) {
        if (model == 'Tim') {
            alert("No!!! You're John!");
            $scope.name = 'John';
        }
    }
});

By passing the model, and manipulating the model that's bound to the input, the view (input element) is updated automatically. That is more angular, and less jquery.

Thank you for your answer. Note that in my example I was not actually accessing the clicked element, which mean $event will not work in my scenario. I've updated the question to be clearer.
Thank you for the update. Again I think my example is too simple. That I really want to do in the controller is focus the element, hence the need for a reference to the element itself.

Collectives™ on Stack Overflow

jQuery inside ng-click to pass html element reference

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related