Use $timeout inside custom AngularJS directive

Question

I want to use $timeout inside my custom AngularJS directive, but it's not working. My last implementation looks as following:

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

App.controller('Controller', function($scope){
    $scope.test = true;
    $scope.toggle = function(){ $scope.test = !$scope.test;};
});

App.directive('showTemporary', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr){
                scope.$watch(attr.showTemporary, function(value){
                element.css('display', value ? '' : 'none');
            });
            $timeout(element.css('display', 'none'), attr.hideDelay);
        }
    }
}]);

And markup:

<div ng-app='App'>
    <div ng-controller='Controller'>
        <button ng-click='toggle()'>toggle</button>
        <div show-temporary='test' hide-delay="5000"> visible</div>
    </div>
</div>

sielakos · Accepted Answer · 2016-07-28 19:13:51Z

4

You need to pass function to $timeout try:

$timeout(function () {
 element.css('display', 'none')
}, attr.hideDelay);

Also you should observe attributes, not watch.

attr.$observe('showTemporary', function(value){
                element.css('display', value ? '' : 'none');
            });

Your html was also broken:

<div show-temporary="{{test}}" hide-delay="5000"> visible</div>

edited Jul 28, 2016 at 19:13

answered Jul 28, 2016 at 18:59

sielakos

2,40413 silver badges13 bronze badges

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

3 Comments

snowfinch27 Over a year ago

thanks, you helped me very much, now element disapears aster delay, but only once, next task for me is to make delay work with on every click, I'll be very grateful, if you help me, here is the working fiddle: link

sielakos Over a year ago

@snowfinch27 here you go, just remove condition in your $observe jsfiddle.net/dtjfojt1/1 and remember to use $observe, not $watch

snowfinch27 Over a year ago

thank you very much, I'm pretty new to AngularJS, sorry for dumb mistakes

DamianoPantani · Accepted Answer · 2016-07-28 18:59:57Z

2

Look carefully at the $timeout docs. The first parameter is FUNCTION, so you probably want it to be like this:

$timeout(function(){
    element.css('display', 'none')
}, attr.hideDelay);

answered Jul 28, 2016 at 18:59

DamianoPantani

1,4362 gold badges17 silver badges25 bronze badges

Comments

doge1ord · Accepted Answer · 2016-07-28 19:08:30Z

0

I'm not sure what are you trying to accomplish here but this is how you should use $timeout

$timeout([fn], [delay], [invokeApply], [Pass]);

$timeout(function() {element.css('display', 'none')}, attr.hideDelay);

answered Jul 28, 2016 at 19:08

doge1ord

3111 silver badge8 bronze badges

Collectives™ on Stack Overflow

Use $timeout inside custom AngularJS directive

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related