如何在指令中使用$ timeout服務？

Question

基本上，我想在角度操縱DOM之後測量元素的寬度。所以我想使用$超時，但它一直讓我錯誤。

HTML

<div ng-app="github"> 
     <ul mynav> 
     <li ng-repeat="nav in navItems">{{nav.name}}</li> 
     </ul> 

     </div> 
    </div> 

CSS

ul,li { 
    display:inline-block; 
} 
li { 
    margin-right:1em; 
} 

JS

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs, timeout) { 
      scope.navItems = [{ 
      "name": "home" 
      }, { 
      "name": "link1" 
      }, { 
      "name": "link2" 
      }, { 
      "name": "link3" 
      }]; 
      timeout(function() { 
      console.log($(element).width()); 
      }) 
     } 

     } 
    }); 
})(); 

Answer 1

link功能不是依賴注入正確的地方。它定義瞭如下所示的參數序列。你不能把依賴關係放在那裏。

link(scope, element, attrs, controller, transcludeFn) { 

進樣$timeout依賴於指令function。

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window, $timeout) { //<-- dependency injected here 
     return { 

就用注射$timeout內link功能

$timeout(function() { 
    console.log(element.width()); 
}) 

Answer 2

就像下面的setInterval替代超時：

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs, timeout) { 
      scope.navItems = [{ 
      "name": "home" 
      }, { 
      "name": "link1" 
      }, { 
      "name": "link2" 
      }, { 
      "name": "link3" 
      }]; 
      setInterval(function() { // replpace 'timeout' with 'setInterval' 
      console.log($(element).width()); 
      }) 
     } 

     } 
    }); 
})(); 

希望它爲你工作。

Answer 3

setInterval(function(){ 
    // code here 
    $scope.$apply(); 
}, 1000); 

$應用是作爲一個提醒，因爲這是一個外部的jQuery叫你需要告訴角度來更新DOM。

$超時作爲一個角度版本自動更新DOM