Verwenden Sie $ Timeout in benutzerdefinierten AngularJS-Direktive

Question

Ich möchte $ Timeout in meiner benutzerdefinierten AngularJS-Direktive verwenden, aber es funktioniert nicht. Meine letzte Implementierung sieht wie folgt:

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); 
     } 
    } 
}]); 

und 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> 

Answer 1

Sie benötigen Funktion $ timeout Versuch passieren:

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

Auch sollten Sie Attribute beobachten, nicht beobachten .

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

Ihre html wurde auch gebrochen:

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

Answer 2

Achten Sie genau auf die $timeout docs. Der erste Parameter ist FUNCTION, so möchten Sie es wahrscheinlich so sein:

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

Answer 3

Ich bin nicht sicher, was Sie versuchen, hier zu tun, aber das ist, wie Sie $ timeout verwenden sollten

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

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