Using pre-compiled values in an Angular directive within an ng-repeat loop

Question

Using pre-compiled values in an Angular directive within an ng-repeat loop

I'm currently working on a directive that should limit the text within an ng-repeat loop to 50 characters and add an ellipses if it exceeds this length. Here is how my ng-repeat is set up:

<li ng-repeat="result in topSuggestions.suggestions">
    <h4>{{result.title}</h4>
    <p suggestion-limiter>{{result.text}}</p>
</li>

This is the directive implementation:

app.directive("suggestionLimiter", [function () {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            console.log($(elem).text());
            var maxTextLength = 50;
            var ellipses = "...";
            var currentText = $(elem).text();

            if (currentText.length > maxTextLength) {
                 currentText = currentText.substr(0, maxTextLength - ellipses.length) + ellipses;
                 $(elem).text(currentText);
            }
        }
    }
}]);

When I log $(elem).text(), it displays as {{result.text}}. I've attempted using if (scope.$last) to ensure the completion of the ng-repeat loop but still facing the same issue. Any suggestions on what might be causing this?

javascript angularjs

Answer 1

Answer №1

However, I believe that a directive is not the most suitable solution for this particular task. It would be more appropriate to utilize a filter instead of a directive in order to modify the output of an expression. Consider the following approach:

filter('truncateWithEllipsis', function() {
  var ellipsis = '...';
  return function(text, limit) {
    text = typeof(text) !== 'undefined'? text: '';
    return text.length > limit?
      (text.substr(0, limit - ellipsis.length) + ellipsis):
      text;
  }
});

You can then proceed to use the filter within your ng-repeat as shown below:

 <ul>
   <li ng-repeat="item in list" ng-bind="item|truncateWithEllipsis:50"></li>
 </ul>

Feel free to explore this example that demonstrates its functionality.

Answer 2

However, I believe that a directive is not the most suitable solution for this particular task. It would be more appropriate to utilize a filter instead of a directive in order to modify the output of an expression. Consider the following approach:

filter('truncateWithEllipsis', function() {
  var ellipsis = '...';
  return function(text, limit) {
    text = typeof(text) !== 'undefined'? text: '';
    return text.length > limit?
      (text.substr(0, limit - ellipsis.length) + ellipsis):
      text;
  }
});

You can then proceed to use the filter within your ng-repeat as shown below:

 <ul>
   <li ng-repeat="item in list" ng-bind="item|truncateWithEllipsis:50"></li>
 </ul>

Feel free to explore this example that demonstrates its functionality.

Answer 3

Answer №2

One technique you can try is wrapping the function body with a `$timeout(function() { ... });`. By doing this, you can ensure that data binding has been completed.

app.directive("suggestionLimiter", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            $timeout(function() {
                console.log($(elem).text());
                var maxTextLength = 50;
                var ellipses = "...";
                var currentText = $(elem).text();

                if (currentText.length > maxTextLength) {
                    currentText = currentText.substr(0, maxTextLength - ellipses.length) + ellipses;
                    $(elem).text(currentText);
                }
            });
         }
    }
}]);

Answer 4

One technique you can try is wrapping the function body with a `$timeout(function() { ... });`. By doing this, you can ensure that data binding has been completed.

app.directive("suggestionLimiter", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            $timeout(function() {
                console.log($(elem).text());
                var maxTextLength = 50;
                var ellipses = "...";
                var currentText = $(elem).text();

                if (currentText.length > maxTextLength) {
                    currentText = currentText.substr(0, maxTextLength - ellipses.length) + ellipses;
                    $(elem).text(currentText);
                }
            });
         }
    }
}]);

Answer 5

Answer №3

One approach is to set your text as a data attribute of the directive and watch for any changes, eliminating the need for a timeout. Below is a rough code snippet that illustrates this concept. Adjusted the code to focus more on utilizing data attributes as the solution revolves around that.

Check out the live demo here

<body ng-controller="test">
<h1>Hello Plunker!</h1>

<div ng-repeat="item in data">
  <span data-limit="5" 
        data-overflow-text = ".."
        data-text="{{item}}" 
        suggestion-limiter></span>
</div>
<script>

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

  app.directive("suggestionLimiter", function () {

    return {
        restrict: "A",
        link: function (scope, elem, attrs) {

            var maxTextLength = attrs.limit*1,
                overflowText = attrs.overflowText;

            attrs.$observe("text",function(v){
              if (v.length > maxTextLength) {
                 v = v.substr(0, maxTextLength - overflowText.length) + overflowText;
                 $(elem).text(v);
            }
            });


          }

        }
  });

app.controller("test", function($scope){

  $scope.data=[ "ssssssdsadsdddddd",
                "sssdsadsdddddikk",
                "adsssssssssdsadsdddod",
                "adsssssssssdsadsddioddd",
                "adsssssssssdsadsddkk'pdd",
                "8-adsdddddd",
                "6767ddd88809909"];
});

angular.bootstrap(document,["app"]);
</script>

Answer 6

One approach is to set your text as a data attribute of the directive and watch for any changes, eliminating the need for a timeout. Below is a rough code snippet that illustrates this concept. Adjusted the code to focus more on utilizing data attributes as the solution revolves around that.

Check out the live demo here

<body ng-controller="test">
<h1>Hello Plunker!</h1>

<div ng-repeat="item in data">
  <span data-limit="5" 
        data-overflow-text = ".."
        data-text="{{item}}" 
        suggestion-limiter></span>
</div>
<script>

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

  app.directive("suggestionLimiter", function () {

    return {
        restrict: "A",
        link: function (scope, elem, attrs) {

            var maxTextLength = attrs.limit*1,
                overflowText = attrs.overflowText;

            attrs.$observe("text",function(v){
              if (v.length > maxTextLength) {
                 v = v.substr(0, maxTextLength - overflowText.length) + overflowText;
                 $(elem).text(v);
            }
            });


          }

        }
  });

app.controller("test", function($scope){

  $scope.data=[ "ssssssdsadsdddddd",
                "sssdsadsdddddikk",
                "adsssssssssdsadsdddod",
                "adsssssssssdsadsddioddd",
                "adsssssssssdsadsddkk'pdd",
                "8-adsdddddd",
                "6767ddd88809909"];
});

angular.bootstrap(document,["app"]);
</script>

Using pre-compiled values in an Angular directive within an ng-repeat loop

Answer №1

Answer №2

Answer №3

Similar questions

Steps to create a dropdown select option using an AJAX call: When the data is fetched, it generates an array

Using JavaScript and Regular Expressions for Performing Multiple Replacements

Display an input field in VueJS with a default value set

Check the status of the audio source URL using JavaScript

Gatsby's own domain and absolute links: the perfect pair

New React Component Successfully Imported but Fails to Render

Intersecting table columns with a different data table

Moving information from two modules to the service (Angular 2)

The property linerGradiant of r cannot be destructured because it is not defined

Tips for implementing angular js to automatically update a table after submitting a form:

Unable to input text by clicking using FabricJS combined with React and Jquery

Leveraging the power of ES6 syntax in Node scripts with Babel

Notification from HTML code within Django

Having issues with reading files in PHP using AJAX? Explore alternative methods for downloading files seamlessly

Different methods to avoid using $scope.$watch in a directive when dealing with an undefined variable

How can I access the parent function within module.exports?

Loading custom places in ArcGIS from a file or database

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

Is it possible to extract Django object values and convert them into JSON data for use in a JavaScript script on my HTML page

Randomly selecting JavaScript with different likelihoods or percentages