AngularJS + jQuery - Unable to hide / show element inside directive

Question

I have an element that I am displaying on the web page - this element is a twitter bootstrap icon -
<i class="icon-trash"></i>.

When the page loads, the icon is hidden by applying the hidden class to it with the style:

.hidden {
    display: none;
}

Now, I have created a directive which in its simplest form looks like:

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

app.directive('testDir', function() {
    return function(scope, iElement, iAttrs) {
        iElement.customMethod({
            source: function() {
                //Some other statements
                jQuery(".icon-trash").removeClass('hidden');
            }
        });
    };
});

This directive is placed on an input box as an attribute. When the user enters an input text, the directive function is indeed called. However, the icon is never displayed again, that is the jQuery code does not seem to remove the hidden class even though the function is called (checked using console.log()). Any idea why?

I think you should read http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background/14994393#14994393 and consider using ng-class instead of writing a complex directive ? — ganaraj, Apr 11 '13 at 22:47
`.show()` sets the `display` property of the icon to `display: inline`. The actual display property should be `display: inline-block` because of which the icon is not rendered. Hence I need to add and remove the class which will set the display the `none` — user109187, Apr 11 '13 at 23:24
Okay then try `$('icon-trash').attr('style', 'display: inline-block !important;')`. — Omar, Apr 11 '13 at 23:35
Also any idea why jQuery does not remove the `hidden` class but will add this style attribute to it? — user109187, Apr 12 '13 at 00:28
I am not sure why, but I guess if that element has no `display` property removing `hidden` wouldn't affect it. Or because of `!important`. A cleaner way is to remove a class and add the above as as class. — Omar, Apr 12 '13 at 06:00

score 2 · Accepted Answer · edited Apr 23 '19 at 09:43

2

Solution 1: jQuery - .show() and .hide().

Hide it on pageshow

$('.icon-trash').hide()

Show it whenever you want.

$('.icon-trash').show()

Solution 2: Create two classes, add/remove them.

.hide-me { display: none !important;}

.show-me { display: inline-block !important; }

$('.icon-trash').removeClass('hide-me').addClass('show-me');

Solution 3: Dirty straight-forward way

$('.icon-trash').attr('style', 'display: inline-block !important;')

edited Apr 23 '19 at 09:43

Praveen Kumar Palai

138
1
10

answered Apr 12 '13 at 08:19

Omar

32,302
9
69
112

1

Solution #2 worked - this time I did not have to add `!important` – user109187 Apr 13 '13 at 20:13

score 0 · Answer 2 · answered Apr 11 '13 at 23:08

This code shows a button with a trash icon using the ng-show directive. Whenever the field search is set to something, ie: the user entered something in the input-text. otherwise, if the text is removed, the button is hidden again.

<input type="text" ng-model="search" />
<button class="btn" ng-show="search" ng-click="trash()">
    <i class="icon-trash"></i> button
</button>

When the button is clicked, the trash function is called.

app.controller('HomeController', ['$scope', function($scope) {
    $scope.search = undefined;

    $scope.trash = function() {
        console.log('clicked: trash button');
    };
}]);

score 0 · Answer 3 · answered Oct 20 '14 at 09:10

0

Maybe it can be helpful with hide/show in angular directive. Jquery must be included before angular in the html, and the tour will work as intended.

answered Oct 20 '14 at 09:10

Adrian Tarnowski

396
3
7

AngularJS + jQuery - Unable to hide / show element inside directive

3 Answers3