$timeout is not working in my code. Im trying to delay the html elements to display after specific time using this directive

Question

Here is the code I'm using. I'm trying to display the html contents which comes under this tag after 4 seconds

Utils.directive('ieUtilsError', function() {
  var directive = {};
  directive.link = function(scope, element, attrs) {
    element.attr("style","display:none") 

    function show() {
      element.attr("style","display:inline")
    }

    $timeout(function() {
       show();
    }, 4000);
  }
});

score 0 · Answer 1 · answered Aug 16 '16 at 05:59

0

$timeout is a service which should be injected. Change the below line

Utils.directive('ieUtilsError', function() {
    //your code
});

to

Utils.directive('ieUtilsError', function($timeout) {
    //your code
});

answered Aug 16 '16 at 05:59

Srujan Reddy

730
1
6
27

Thanks a lot sir! it works fine now, but there is an another issue came up in the same. $timeout is working when page is loading for the first time. If i go to another page and come back delayed function is not delaying, its instantly displaying its elements – Madan Thunderfist Aug 16 '16 at 09:25
please create a fiddle and share the link. – Srujan Reddy Aug 16 '16 at 09:40

score 0 · Answer 2 · answered Aug 16 '16 at 06:00

0

Include the $timeout dependency in your directive, like this:

Utils.directive('ieUtilsError', function($timeout) {
    //your code...
});

answered Aug 16 '16 at 06:00

illeb

2,942
1
21
35

Thanks a lot sir! it works fine now, but there is an another issue came up in the same. $timeout is working when page is loading for the first time. If i go to another page and come back delayed function is not delaying, its instantly displaying its elements – Madan Thunderfist Aug 16 '16 at 09:26

score 0 · Answer 3 · answered Aug 16 '16 at 06:03

You didn't inject the $timeout service in your directive, so it's undefined:

Utils.directive('ieUtilsError', function($timeout) {

You also forgot to return the directive from the function:

return directive;

Otherwise, it works fine: http://plnkr.co/edit/z0P6ENRyXvyYjNr7KqzV?p=preview

Note that is couls be reduced to

Utils.directive('ieUtilsError', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      element.attr("style","display:none") 

      $timeout(function() {
         element.attr("style","display:inline");
      }, 4000);
    }
  };
});

Thanks a lot sir! it works fine now, but there is an another issue came up in the same. $timeout is working when page is loading for the first time. If i go to another page and come back delayed function is not delaying, its instantly displaying its elements — Madan Thunderfist, Aug 16 '16 at 09:25

score 0 · Answer 4 · edited Aug 16 '16 at 07:13

0

You need to inject dependencies to the directive like in other modules:

Utils.directive('ieUtilsError', ['$timeout', function($timeout) {
   return = {
        link: function($scope, element){
            element.attr("style","display:none")
            //use $timeout
           $timeout(function() {
              element.attr("style","display:inline");
           }, 4000);
        }
    };
}]);

edited Aug 16 '16 at 07:13

zeeshan Qurban

387
1
3
15

answered Aug 16 '16 at 06:09

Mohan P

422
3
16

Thanks a lot sir! it works fine now, but there is an another issue came up in the same. $timeout is working when page is loading for the first time. If i go to another page and come back delayed function is not delaying, its instantly displaying its elements – Madan Thunderfist Aug 16 '16 at 09:25
You can refer this link to bind your function after the template is loaded - [link](http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded) – Mohan P Aug 16 '16 at 10:59
This is exactly what i was looking for. Because while loading the page some unwanted html elements are flickering in the screen in Internet Explorer browser. So i wanted to delay that flickering elements, thats where im using this directive. As im new and u have suggested this link can u suggest me how to go abt this issue – Madan Thunderfist Aug 16 '16 at 12:19
`elem.ready(function(){ $timeout(function() { element.attr("style","display:inline"); }, 4000); });` Replace your timeout code with above code and try. – Mohan P Aug 16 '16 at 12:38
I tried using this sir! but my main page is only not loading if i include this code. Is elem.ready is used here to load the contents after page is completely loaded? – Madan Thunderfist Aug 17 '16 at 05:10
Please replace **elem** with **element** and try – Mohan P Aug 17 '16 at 05:25
nope! still not loading. Any idea what can be the problem here – Madan Thunderfist Aug 17 '16 at 05:40
Can you share JSfiddle. – Mohan P Aug 17 '16 at 05:48

score 0 · Answer 5 · answered Aug 16 '16 at 06:27

0

You need to inject $timeout into your directive

Utils.directive('ieUtilsError', ['$timeout',ieUtilsError]);

 function ieUtilsError($timeout){
 return {

  $timeout(function() {
     element.attr("style","display:inline");
  }, 4000);

   };
 }

answered Aug 16 '16 at 06:27

zeeshan Qurban

387
1
3
15

Thanks a lot sir! it works fine now, but there is an another issue came up in the same. $timeout is working when page is loading for the first time. If i go to another page and come back delayed function is not delaying, its instantly displaying its elements – Madan Thunderfist Aug 16 '16 at 09:26
Try to use $interval and please upvote if answer is acceptable thanks. – zeeshan Qurban Aug 16 '16 at 15:03

$timeout is not working in my code. Im trying to delay the html elements to display after specific time using this directive

5 Answers5