Restrict the use of AngularJS directives

Question

Restrict the use of AngularJS directives

I am attempting to create a custom directive in Angularjs 1.4 that functions as a filter.

My goal is to restrict the length of a string using the limitTo filter within a directive instead of as a (|) filter.

Here is what I have tried so far:

charlimit.js custom directive

function controller($scope) {
    $scope.length = 15;
}

angular.module('xApp')
  .directive('charlimit', function () {
    return {
      restrict: 'A',
      scope: {
        limitTo: '@',
      },
      controller: ["$scope", controller]
    };
});

index.html

<p charlimit="5"></p>

Do you have any suggestions or ideas on how to make this work correctly?

Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

let myApp = angular.module("myApp", []);

myApp.directive('textLimit', function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      let limitLength = parseInt(attrs.textLimit);
      scope.displayText = scope.displayText.substring(0, limitLength);
      return scope.displayText;
    }
  }
});


myApp.controller("MainController", function($scope) {
$scope.displayText = 'Example content';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MainController">
  <p text-limit="5">{{displayText}}</p>
</body>

Answer 2

let myApp = angular.module("myApp", []);

myApp.directive('textLimit', function() {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      let limitLength = parseInt(attrs.textLimit);
      scope.displayText = scope.displayText.substring(0, limitLength);
      return scope.displayText;
    }
  }
});


myApp.controller("MainController", function($scope) {
$scope.displayText = 'Example content';
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="MainController">
  <p text-limit="5">{{displayText}}</p>
</body>

Restrict the use of AngularJS directives

Answer №1

Similar questions

"Utilizing AJAX in JavaScript to render HTML content and inserting it into an HTML element with a specific id

Mastering Dropdown Navigation and Value Setting in Angular

Invoke index functions within a component

Can you explain the contrast between window.performance and PerformanceObserver?

The AJAX onreadystatechange function may not be consistently triggered

Encountering an Error during the Installation of MapBox SDK in React Native

The request does not include the cookies

Guide on invoking a JavaScript function within a jQuery upon a specific event, such as clicking a hyperlink

Delay the loading of templates when utilizing ng-controller

I aim to showcase JSON data within a div element

Looking at an HTML string in its natural HTML form

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

Resizing an image for mobile using next/Image

Modify the font style of numbers based on the keyboard language selected by the user

AngularJS OAuth authentication Pop-up: Waiting for JSON response

Is it possible to run a local file on a localhost server in Sublime Text 3 with the help of the SideBar

JavaScript click event not triggering on ASP.NET button

How to Remove Carousel Arrows in Bootstrap 5

List with option to input a new value rather than selecting from the existing options

Advancements in ajax during the simultaneous uploading of multiple files