How to get the length of a div in angularjs on click?

Question

This is really basic but I don't know why I'm not able to solve this problem.

I'm trying to get the length of a div when I click on it, I've tried different ways to do that but with no success at all.

Here is an example of what I want: http://plnkr.co/edit/eGqu2HSUixr0S5CH3jNr?p=preview

If someone can explain how is the 'angular way' to do that will be really appreciated. :)

Banana-In-Black · Accepted Answer · 2013-12-20 09:06:12Z

2

this will refer to the scope, try passing $event.target instead, and wrap it with angular.element because you want to call html().

http://plnkr.co/edit/ibBNM0wK4RDH2JnamfV9?p=preview

<div ng-click="getLength($event.target)">Click to know the length of this string</div>

app.controller('MainCtrl', function($scope, $parse) {
  $scope.getLength = function(obj) {
    var obj = angular.element(obj);
    try {
      $scope.output = (obj !== undefined) ? obj.html().length : 'undefined';
    } catch(err) {
      $scope.output = err.message;
    }

  }
});

edited Dec 20, 2013 at 9:06

answered Dec 20, 2013 at 8:57

Banana-In-Black

2,5571 gold badge29 silver badges33 bronze badges

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

Comments

Michal Charemza · Accepted Answer · 2013-12-20 09:13:59Z

0

If you're wanting to know the length of a string in the DOM, then the Angular way of doing it would be to put the functionality in a custom directive.

app.directive('sendLengthOnClick', function() {
  return {
    scope: {
      'localSendLength': '&sendLengthOnClick'
    },
    link: function(scope, iElement, iAttr) {
      iElement.on('click', function() {
        var length = iElement.text().length;
        scope.localSendLength({length:length});
      });
    }
  }
});

You can then add the attribute send-length-on-click on any element, to send the string length to a function on the parent scope:

<div send-length-on-click="useLength(length)">Click to know the length of this string</div>

You can see this in action in the following Plunker:

http://plnkr.co/edit/Zuk2wnndayvBgYyNXQaL?p=preview

However, I would be curious to know why you would like this. It feels a bit close to calculations based on model data, which would be more usual to be in a service, fetching the length of the string before it hits the DOM, rather than after.

answered Dec 20, 2013 at 9:13

Michal Charemza

27.3k15 gold badges114 silver badges191 bronze badges

2 Comments

DreaMTT Over a year ago

True! Unfortunately, I come from a jQuery world, used to do a lot of DOM manipulations. I'm working to change the way I think when I'm using Angular, so any best practices or advices to change my process of thinking will be highly appreciated. I just created a custom email component. This component to be as functional as an input, I'm obliged to deal with these kind of manipulations, anyways if you can shed some light on this to do it in the right Angular way, would be awesome! You can check this component here: plnkr.co/edit/9TmCt2vWzdOgWtrBIkEZ?p=preview

Michal Charemza Over a year ago

Not completely related to the original question, but at the moment I think a choice of a div with contenteditable="true" to be overcomplicating it, and would be quite difficult to get right, in terms of making sure the user doesn't break it (what if the user hits enter, or pastes some html in there?). Standard HTML already has the placeholder attribute on <input>, and ng-model on an <input> element can tie it to a value on a scope. If you need some custom validation, then you should read up on ngModelController

Collectives™ on Stack Overflow

How to get the length of a div in angularjs on click?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related