在自定義AngularJS指令中使用$ timeout

我想在我的自定義AngularJS指令中使用$ timeout，但它不起作用。我最後的實現看起來如下：

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>

來源

2016-07-28 snowfinch27

你需要傳遞函數$超時嘗試：

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

來源

2016-07-28 18:59:44 sielakos

謝謝，你幫了我很多http://jsfiddle.net/5j08dn5s/ – snowfinch27

@ snowfinch27你的代碼在很少的地方壞了http://jsfiddle.net/dtjfojt1/ – sielakos

謝謝，你幫了我很多，現在元素disapears aster延遲，但只有一次，對我來說，下一個任務是延遲每次點擊的工作，我會非常感激，如果你幫助我，這裏是工作小提琴：[link]（http://jsfiddle.net/五j08dn5s /） – snowfinch27

仔細看的$timeout docs。第一個參數是函數，因此你可能希望它是這樣的：

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

來源

2016-07-28 18:59:57 Damiano

我不知道什麼是你想在這裏完成，但是這是你應該如何使用$超時

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

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

來源

2016-07-28 19:08:30 doge1ord

在自定義AngularJS指令中使用$ timeout

回答

相關問題