Passing element in ng-click

Question

I need to pass an element in ng-click as a param.

<textarea id="chat-msg" name="chat-msg" class="p-r-40 chat-reply form-control"></textarea>
<img src="libs/converse/lib/emoji/smile.png" class="image-size" ng-click="insertEmotion(document.getElementById('chat-msg'))" ></img>

Here onclick works fine, but how can I pass it in ng-click?

Answer 1

Consider moving the document.getElementById portion into the insertEmotion() function.

Call like this insertEmotion('chat-msg') where insertEmotion takes the element name as its parameter.

Answer 2

It sounds like you may be trying to manipulate the DOM within a controller, which is not really the 'Angular way'. A better approach may be to seek to bind the textarea to a model variable, and have the ngClick directive update the model variable.

For example:

<textarea ng-model="chat"></textarea>
<img src="libs/converse/lib/emoji/smile.png" class="image-size" ng-click="chat = chat + ':-)'" ></img>

Here is a plunkr illustrating this: http://plnkr.co/edit/d0hMVbrwKy6nBgVxWBQP?p=preview

Answer 3

Maybe try creating chat object and assign the model to the view like this?

http://jsfiddle.net/e9vJH/

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

app.controller('EmotionCtrl',function($scope) {
    $scope.chat = 'Chat message';
    $scope.insertEmotion = function(emotion) {
        $scope.chat = $scope.chat + emotion;
    };
});


<div ng-app="emotionApp" ng-controller="EmotionCtrl">
    <textarea ng-model="chat"></textarea>
    <hr>
    <button ng-click="insertEmotion(':)')">Insert</button>
</div>