Использовать $ таймаут внутри пользовательской директивы AngularJS

Question

Я хочу использовать $ timeout внутри моей пользовательской директивы AngularJS, но она не работает. Моя последняя реализация выглядит следующим образом:

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

И разметка:

<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

Вам необходимо пройти функцию $ таймаута попробовать:

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

Кроме того, вы должны соблюдать атрибуты, а не смотреть ,

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

Ваш HTML также сломана:

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

Answer 2

Посмотрите внимательно на $timeout docs. Первый параметр является функцией, так что вы, вероятно, хотите, чтобы это было так:

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

Answer 3

Я не уверен, что вы пытаетесь достичь здесь, но это, как вы должны использовать $ таймаут

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

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