How to Dynamically add/remove directive AngularJS

Question

I'm using the Angular Ellipsis directive (here: https://github.com/dibari/angular-ellipsis) to put some ellipsis on text that overflows. Here is the code that does this for the text contained in the scope variable 'fullText'.

<div data-ng-bind="fullText" data-ellipsis></div>

I'd like also, to have the ability to show the full text, un-ellipsised (if that is a word...) when I click on a button, say. This directive doesn't give me a easy way to do that, as far as I can tell.

What is the best AngularJS way to do this? I am pretty new to AngularJS and haven't yet written any directives yet - is there a non directive way to do this elegantly?

You can use removeAttr to remove the attribute.removeAttr is a jquery function but angular wraps jquery lite with itself, so you can safely use it docs.angularjs.org/api/ng/function/angular.element — brk
– brk, Commented Oct 13, 2015 at 12:35

Magus · Accepted Answer · 2015-10-13 12:36:11Z

1

You can use ng-if or ng-show/ng-hide :

<div data-ng-bind="fullText" data-ellipsis ng-if="condition"></div>
<div data-ng-bind="fullText" ng-if="!condition"></div>
<button ng-click="toggle()">Toggle</button>

// In controller :
$scope.toggle = function() {
    $scope.condition = !$scope.condition;
}

But the best way is to have the directive handle it directly.

answered Oct 13, 2015 at 12:36

Magus

15.1k4 gold badges40 silver badges52 bronze badges

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

3 Comments

Tom O'Brien Over a year ago

Hi Magus - that makes sense - it is what I thought I could do.. but this creates two div's in memory for each place you want to do it, correct? Which is a fairly big overhead? Would using a directive be much more efficient?

Magus Over a year ago

With a directive you'll have only one div so yes it is better.

Abdul23 Over a year ago

You can write your own custom directive that wraps your div and attaches or detaches the data-ellipsis directive based on the inputs you provide to the directive.Though it is possible, but I would suggest using ng-if is a simpler approach as creating a custom directive would require you to $compile the html string which would itself add to time complexity.

Collectives™ on Stack Overflow

How to Dynamically add/remove directive AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related