How do I get string length of an element after binding using AngularJS?

Question

Ok what I am trying to do is count the number of characters inside an element, but the element includes binding (eg. {{data.username}}) and I want to get the string length after the binding occurs.

My thinking so far has been to create a attribute directive and just .text().length the element that is passed into the "link" function — see below:

This was my working so far:

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Counting Characters</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
  </head>
  <body ng-controller="TestCtrl">
    <div count-chars>{{person.firstName}} {{person.lastName}}</div>
    <script>
      var app = angular.module('app', []);

      app.controller('TestCtrl', function ($scope) {
        $scope.person = {
          firstName: "James",
          lastName: "Smith"
        };
      });

      app.directive('countChars', [function(){
        return {
          link: function(scope, elem, attrs) {
            console.log(elem.text());
            console.log(elem.text().length);
          }
        };
      }]);

    </script>
  </body>
</html>

The problem is that this only returns the string before any bindings occurs (via the console.logss at the moment). What I would want to get is James Smith and 11 characters, but what I get is {{person.firstName}} {{person.lastName}} and 40 chars.

Any ideas?

dfsq · Accepted Answer · 2014-12-11 10:29:26Z

2

Simplest thing you can do is to wrap your code into $timeout service, so it will execute on the next digest loop, which means that all interpolation job will have finished by that time:

app.directive('countChars', ['$timeout', function($timeout) {
    return {
        link: function(scope, elem, attrs) {
            $timeout(function() {
                console.log(elem.text());
                console.log(elem.text().length);
            });
        }
    };
}]);

Demo: http://plnkr.co/edit/4vkQoTPmx0gL3hOUpN0n?p=preview

answered Dec 11, 2014 at 10:29

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

hon2a Over a year ago

While this does work for the use-case at hand, it is limited by two assumptions. First, that the values are going to be assigned in the current "thread". It breaks if the values are assigned asynchronously. Second, that the values are assigned only once and then never changed.

dfsq Over a year ago

@hon2a I know, that's why I said this is simplest this in this case. More generic solution if we need to track updates/changes would use scope.$watch of course like in your example or Mike Chamberlain.

hon2a Over a year ago

Yeah, I just added the comment to make the answer more comprehensive by including drawbacks.

Mike Chamberlain · Accepted Answer · 2014-12-11 10:28:26Z

1

Inside your directive, could you calculate elem.text().length inside a $watch on person.firstName + person.lastName?

answered Dec 11, 2014 at 10:28

Mike Chamberlain

43k28 gold badges113 silver badges160 bronze badges

1 Comment

dfsq Over a year ago

Also true, you can use $watch. However it's preffered to avoid additional watches, and this one will have DOM manipulation inside, so it's not very good for performance. But it's possible, true.

hon2a · Accepted Answer · 2014-12-11 10:41:18Z

1

You cannot get the interpolated string during compilation, as you're only assigning the values later, in the controller. Therefore, you need to watch for the changes:

compile: function (element) {
    var text = $interpolate(element.text());

    return function link ($scope) {
        $scope.$watch(text, function (interpolatedText) {
            // measure and log (or do whatever with) your interpolated text
            // (the code you put here will run whenever the text changes)
        });
    };
}

(I've put retrieval of the original text in compile phase, so that it works even if the properties on scope are already assigned.)

edited Dec 11, 2014 at 10:41

answered Dec 11, 2014 at 10:35

hon2a

7,2545 gold badges47 silver badges60 bronze badges

1 Comment

dfsq Over a year ago

Very nice usage of $interpolate, +1.

Collectives™ on Stack Overflow

How do I get string length of an element after binding using AngularJS?

3 Answers 3

Demo: http://plnkr.co/edit/4vkQoTPmx0gL3hOUpN0n?p=preview

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://plnkr.co/edit/4vkQoTPmx0gL3hOUpN0n?p=preview

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related