CODEWITHSUNDEEP
javascriptangularjs
Tom O'Brien
Tom O'Brien

Reputation: 1831

How to Dynamically add/remove directive AngularJS

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?

Upvotes: 1

Views: 442

Answers (1)

Magus
Magus

Reputation: 15104

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.

Upvotes: 1

Related Questions